Tailwind CSS 프로젝트에서 맞춤형 CSS 규칙을 추가해야 할 때, 가장 쉬운 방법은 스타일시트에 직접 CSS를 추가하는 것이다. 또한, @layer 디렉티브를 사용하여 Tailwind의 base, components, utilities 레이어에 스타일을 추가하면 더 강력한 기능을 사용할 수 있다.
1. Custom CSS 추가하기
Tailwind CSS 프로젝트에 맞춤형 CSS 규칙을 추가하는 가장 간단한 방법은 기존 스타일시트에 CSS를 직접 추가하는 것이다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
.my-custom-style {
color: red;
font-size: 1.5rem;
}위 예시에서는 main.css 파일에 .my-custom-style 클래스를 추가하였다. 이제 이 클래스를 HTML 요소에 적용하면 해당 스타일이 적용된다.
HTML 예시:
<div class="my-custom-style">
맞춤형 스타일이 적용된 텍스트입니다.
</div>2. @layer 디렉티브 사용하기
@layer 디렉티브를 사용하여 Tailwind의 base, components, utilities 레이어에 스타일을 추가할 수 있다. 이를 통해 사용자 정의 스타일이 Tailwind의 기존 스타일과 더 잘 통합되도록 할 수 있다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.my-custom-style {
color: blue;
font-size: 2rem;
}
}위 예시에서는 @layer components 블록 내에 .my-custom-style 클래스를 추가하였다. 이를 통해 이 스타일이 Tailwind의 components 레이어에 추가된다.
HTML 예시:
<div class="my-custom-style">
맞춤형 컴포넌트 스타일이 적용된 텍스트입니다.
</div>@layer 디렉티브를 사용하면 선언 순서를 제어하여 스타일을 자동으로 해당 @tailwind 디렉티브로 이동시키고, 수정자와 트리 쉐이킹과 같은 기능을 사용할 수 있게 된다.
3. 기본 스타일 추가하기
페이지의 기본값을 설정하려면 HTML이나 body 요소에 클래스들을 추가할 수 있다.
예시:
<!doctype html>
<html lang="en" class="text-gray-900 bg-gray-100 font-serif">
<!-- ... -->
</html>또한, 특정 HTML 요소에 대해 기본 스타일을 추가하려면 @layer 디렉티브를 사용하여 Tailwind의 base 레이어에 스타일을 추가할 수 있다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}@apply 디렉티브를 사용하면 Tailwind의 기존 유틸리티 클래스를 재사용하여 스타일을 적용할 수 있다. 이는 중복 코드를 줄이고, 일관된 스타일을 유지하는 데 유용하다.
4. 컴포넌트 클래스 추가하기
복잡한 클래스를 추가하려면 components 레이어를 사용할 수 있다. 이 클래스들은 유틸리티 클래스들로 덮어쓸 수 있다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
background-color: #ffffff;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}@apply 디렉티브를 사용하면 Tailwind의 유틸리티 클래스를 재사용하여 스타일을 적용할 수 있게 해준다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
@apply bg-white rounded-lg p-6 shadow-xl;
}
}HTML 예시:
<!-- 각진 모서리를 가진 카드 -->
<div class="card rounded-none">
<!-- ... -->
</div>5. 사용자 정의 유틸리티 추가하기
자체 사용자 정의 유틸리티 클래스를 Tailwind의 utilities 레이어에 추가할 수 있다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.content-auto {
content-visibility: auto;
}
}6. 수정자와 함께 사용자 정의 CSS 사용하기
@layer를 사용하여 추가한 사용자 정의 스타일은 자동으로 Tailwind의 수정자 구문을 지원한다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.content-auto {
content-visibility: auto;
}
}HTML 예시:
<div class="lg:dark:content-auto">
<!-- ... -->
</div>7. 사용되지 않는 사용자 정의 CSS 제거하기
base, components, utilities 레이어에 추가한 사용자 정의 스타일은 실제로 HTML에서 사용된 경우에만 컴파일된 CSS에 포함된다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
/* ... */
}
}사용되지 않은 스타일을 컴파일에 포함시키고 싶다면, @layer 디렉티브를 사용하지 않고 스타일시트에 직접 추가하면 된다.
예시:
/* main.css */
@tailwind base;
@tailwind components;
/* 항상 포함될 스타일 */
.card {
/* ... */
}
@tailwind utilities;위 예시에서는 .card 클래스를 @tailwind utilities 디렉티브 앞에 추가하여 유틸리티 클래스들이 여전히 이를 덮어쓸 수 있도록 한다.
8. 여러 CSS 파일 사용하기
많은 양의 CSS를 작성하고 여러 파일로 구성하는 경우, postcss-import 플러그인을 사용하여 이러한 파일을 단일 스타일시트로 결합한 후 Tailwind로 처리해야 한다. 그렇지 않으면 @layer 디렉티브를 @tailwind 디렉티브 없이 사용하는 것에 대한 오류가 발생할 수 있다.
postcss.config.js 예시:
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}