Tailwind CSS 개발
문서
자세한 Tailwind CSS v4 패턴과 문서가 필요하면 search-docs를 사용하세요.
기본 사용법
- Tailwind CSS 클래스를 사용하여 HTML을 스타일링하세요. 프로젝트의 기존 Tailwind 관례를 확인하고 따르며, 새로운 패턴을 도입하기 전에 일관성을 유지하세요.
- 반복되는 패턴을 프로젝트의 관례(예: Blade, JSX, Vue)에 맞는 컴포넌트로 추출하는 것을 제안하세요.
- 클래스 배치, 순서, 우선순위 및 기본값을 고려하세요. 중복 클래스는 제거하고, 상위 또는 하위 요소에 신중하게 클래스를 추가하여 반복을 줄이고 요소를 논리적으로 그룹화하세요.
Tailwind CSS v4 세부 사항
- 항상 Tailwind CSS v4를 사용하고 폐지된 유틸리티는 사용하지 마세요.
- Tailwind v4에서는
corePlugins가 지원되지 않습니다.
CSS 우선 설정
Tailwind v4에서는 설정이 CSS 우선이며 @theme 지시문을 사용합니다. 별도의 tailwind.config.js 파일이 필요하지 않습니다:
@theme {
--color-brand: oklch(0.72 0.11 178);
}
임포트 구문
Tailwind v4에서는 v3에서 사용된 @tailwind 지시문 대신 일반 CSS @import 문으로 Tailwind를 가져옵니다:
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
대체된 유틸리티
Tailwind v4는 폐지된 유틸리티를 제거했습니다. 아래 표시된 대체 유틸리티를 사용하세요. 불투명도(Opacity)의 경우 *-opacity-* 클래스를 제거하고 값을 기존 색상의 수정자(modifier)로 추가합니다: bg-blue-500 bg-opacity-50은 bg-blue-500/50이 되고, text-white text-opacity-75는 text-white/75가 됩니다.
| 폐지됨 | 대체 |
|---|---|
| bg-opacity-* | bg-{color}/* |
| text-opacity-* | text-{color}/* |
| border-opacity-* | border-{color}/* |
| divide-opacity-* | divide-{color}/* |
| ring-opacity-* | ring-{color}/* |
| placeholder-opacity-* | placeholder-{color}/* |
| flex-shrink-* | shrink-* |
| flex-grow-* | grow-* |
| overflow-ellipsis | text-ellipsis |
| decoration-slice | box-decoration-slice |
| decoration-clone | box-decoration-clone |
간격(Spacing)
형제 요소 간 간격에는 마진 대신 gap 유틸리티를 사용하세요:
<div class="flex gap-8">
<div>항목 1</div>
<div>항목 2</div>
</div>
다크 모드
기존 페이지와 컴포넌트가 다크 모드를 지원한다면, 새 페이지와 컴포넌트도 동일한 방식으로 지원해야 하며, 일반적으로 dark: 변형을 사용합니다:
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
콘텐츠가 색상 구성표에 맞게 조정됩니다
</div>
일반적인 실수
- 폐지된 v3 유틸리티(bg-opacity-, flex-shrink- 등) 사용
@import "tailwindcss"대신@tailwind지시문 사용- CSS
@theme지시문 대신tailwind.config.js사용 시도 - 형제 요소 간 간격에 gap 유틸리티 대신 마진 사용
- 프로젝트가 다크 모드를 사용하는데 다크 모드 변형을 추가하는 것을 잊음