이전에 tailwind(이하 테일윈드)의 존재를 알았지만 클래스명을 더럽힌다는 이유로 기피했다. nextjs를 접하면서 테일윈드를 사용하게 되었는데 단점도 존재하지만 장점이 참 많은 프레임워크 같다. 테일윈드를 좀 더 똑똑하게 사용하기 위해 알면 좋은 정보들과 개념들을 익혀보자.
Code Editor 설정
Tailwind CSS IntelliSense 익스텐션
테일윈드 공식 익스텐션을 사용하면 자동 완성, 클래스명 호버 시 해당 클래스 명의 대한 클래스 속성 확인, 린팅 등의 기능을 제공하여 좀 더 편리하게 코드를 작성할 수 있다.
Prettier 플러그인
테일윈드 공식 prettier 플러그인을 사용하면 권장 순서에 따라 클래스를 자동 정렬할 수 있다.
npm install -D prettier-plugin-tailwindcss// .prettierrc.json
{
// 생략
"plugins": ["prettier-plugin-tailwindcss"]
}Custom Styles
커스텀 테마
테일윈드는 다양한 색상과 px을 지원하고 있다. 하지만 프로젝트를 진행하다 보면 해당 컨셉에 맞는 디자인 가이드가 정해져 여러 컴포넌트에서 필요한 경우가 있다. 이럴 때 tailwind.config.js의 theme에 추가하여 사용할 수 있다. theme.extend.colors가 아닌 theme.colors에 추가하게 되면 기존 색상을 덮어쓰게 된다.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
primary: '#ffc107',
secondary: '#2979ff',
success: '00c07f',
failure: 'ff6562',
},
fontSize: {
'15px': '15px',
},
},
},
};font-size의 경우 테일윈드는 text-sm: 14px, text-base: 16px, text-lg: 18px을 제공하기에 15px을 추가하여 사용했다.
<button type="button" className="rounded-md bg-primary text-15px">
로그인
</button>임의의 값 사용
한번 사용하는 색상이 있는데 해당 색상은 테일윈드 팔레트에서 지원하지 않는다. 또한 특정 px을 한 번씩 사용해야 하는데 해당 px을 지원하지 않아 theme에 추가하는 건 별로 좋지 않은 생각 같다. 이럴 땐 다음과 같이 사용할 수 있다.
<button type="button" className="rounded-[50px] bg-[#702ddc] text-[15px]">
로그인
</button>@layer
버튼의 경우 여러 컴포넌트에 같은 스타일을 사용될 가능성이 매우 높다. 중복을 줄이기 위해선 사용자 정의 CSS를 추가하여 해당 스타일을 적용해야 한다.
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
background-color: red;
color: #fff;
padding: 10px;
}<button className="btn" type="button">
button
</button>@layer 문을 사용하여 tailwind Base, components, utilities 레이어에 스타일을 추가할 수도 있다.
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
background-color: red;
color: #fff;
padding: 10px;
}
}테일윈드가 스타일을 3개의 layer로 구성하는 이유
css 스타일이 중복될 때 스타일시트 안에서 마지막에 선언된 클래스의 스타일이 적용된다.
.btn-black {
color: red;
background-color: black;
}
.btn-blue {
background-color: blue;
}
.btn {
background-color: yellow;
}<button className="btn-black btn-blue btn" type="button">
button
</button>버튼의 배경색이 선언된 클래스 3개를 추가했다. 이 버튼의 배경색은 스타일시트 내 가장 마지막에 선언된 .btn의 색상(노랑)이 적용되며 폰트 색상은 중복되지 않으므로 빨간색이 적용된다. 이런 경우를 관리하기 위해 테일윈드는 3개의 레이어로 구분한다.
base레이어는 리셋 규칙이나 HTML 요소 기본 스타일을 위한 레이어이다.components레이어는 유틸리티로 재정의할 수 있는 클래스 기반 스타일을 위한 레이어다.utilities레이어는 다른 스타일보다 우선으로 하는 소규모 단일 목적 클래스를 위한 레이어다.
@layer 문을 사용하면 선언 순서를 제어하고 hover:btn처럼 특정 클래스를 사용할 수 있으며 빌드 시 크기를 줄이기 위해 선언되지 않은 유틸리티 클래스는 제거된다.
base layer
특정 요소에 대한 기본 스타일을 추가하려면 @layer 문을 사용하여 @tailwind base 레이어에 추가한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-red-950;
}
h2 {
color: red;
}
}@apply를 사용하면 테일윈드의 유틸리티 클래스를 사용할 수 있다.
components layer
컴포넌트 레이어는 카드, 버튼과 같이 재사용성이 높은 유틸리티 클래스를 만들 때 사용한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply rounded border border-gray-300;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
/* ... */
}단순히 코드가 깨끗해 보이기 위해 컴포넌트를 사용해 추상화를 하게 되면 테일윈드의 장점을 잃게 되니 재사용이 가능한 경우에 사용을 권장한다.
utilities layer
유틸리티 레이어는 테일윈드가 제공하지 않은 유틸리티 클래스를 만들 때 사용한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.content-auto {
content-visibility: auto;
}
}Preflight
테일윈드의 preflight는 브라우저(Chrome, Firefox, Safari)의 디자인 시스템을 일치 시키며 기본 스타일을 수정(margin, boder 제거 스타일 초기화 등) 한다. 이러한 코드는 base 레이어에 저장된다.
@tailwind base;
@tailwind components;
@tailwind utilities;
