How this skill is triggered — by the user, by Claude, or both
Slash command
/tailwind-css:tailwind-cssThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Version:** 4.1 (Jan 2026)
references/01-styling-with-utility-classes.mdreferences/02-hover-focus-and-other-states.mdreferences/03-responsive-design.mdreferences/04-dark-mode.mdreferences/05-theme-variables.mdreferences/06-colors.mdreferences/07-adding-custom-styles.mdreferences/08-detecting-classes-in-source-files.mdreferences/09-functions-and-directives.mdVersion: 4.1 (Jan 2026) Doc Source: Official Tailwind CSS documentation
Tailwind CSS v4를 사용한 스타일링 구현 시 베스트 프랙티스를 적용합니다. className 순서 규칙, 동적 클래스 처리, 반응형 디자인, 다크 모드, 테마 커스터마이징 등 Tailwind CSS의 핵심 패턴을 올바르게 구현하도록 안내합니다.
// ❌ WRONG - 순서 없이 작성
<div className="text-white flex bg-blue-500 p-4 absolute w-full">
// ✅ CORRECT - 포지션 → 레이아웃 → 공백 → 외곽 → 배경 → Flex/Grid → 폰트
<div className="absolute w-full p-4 bg-blue-500 flex text-white">
| 순위 | 종류 | 속성 |
|---|---|---|
| 1 | 포지션 | absolute, relative, fixed, top, left… |
| 2 | 레이아웃 | w-, h-, size-, min-w-[], min-h-[], overflow-hidden, … |
| 3 | 공백 | m-, mx-, my-, p, px-, py-… |
| 4 | 외곽 효과 | border-[], border-color-[], shadow-[]… |
| 5 | 배경색 | bg-, opacity- |
| 6 | Flex Box, Grid | flex, grid, flex-col, grid-cols-, gap-, justify-, items-… |
| 7 | 폰트 | text-, font-, whitespace-, leading-, … |
| 8 | 애니메이션 | animate- |
| 9 | 트랜지션 | transition-, duration-, ease-… |
| - | 조건 | hover:, group-hover:, focus: (해당 속성 바로 뒤에 위치) |
// ❌ WRONG
<div className="w-10 h-10">
// ✅ CORRECT
<div className="size-10">
// ❌ WRONG - 동적 클래스 생성 불가
<div className={`text-${color}-500`}>
// ✅ CORRECT - 완전한 클래스명 매핑
const colorMap = {
red: 'text-red-500',
blue: 'text-blue-500',
} as const;
<div className={colorMap[color]}>
!important Unless Absolutely Necessary// ❌ AVOID
<div className="!text-red-500">
// ✅ CORRECT - 구체적인 셀렉터 또는 레이어 사용
<div className="text-red-500">
/* ✅ v4 방식 - @theme으로 디자인 토큰 정의 */
@import 'tailwindcss';
@theme {
--color-brand: #3b82f6;
--font-display: 'Inter', sans-serif;
}
// ❌ WRONG - 반복적인 스타일
<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
// ✅ CORRECT - @apply로 재사용 가능한 컴포넌트 스타일
// globals.css
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600;
}
}
| v3 (deprecated) | v4 (current) |
|---|---|
tailwind.config.js | @theme directive in CSS |
@tailwind base/components/utilities | @import "tailwindcss" |
theme.extend.colors | @theme { --color-* } |
darkMode: 'class' | @variant dark (&:where(.dark, .dark *)) |
content: [...] 설정 | 자동 감지 (.gitignore 외 모든 파일) |
| PostCSS 플러그인 필수 | Vite 플러그인 권장, PostCSS 선택적 |
// 기본 유틸리티 조합
<div className="min-h-screen p-8 bg-gray-100 flex flex-col items-center gap-4">
<h1 className="text-3xl font-bold text-gray-900">Title</h1>
<p className="max-w-prose text-gray-600 leading-relaxed">Content</p>
</div>
// 모바일 퍼스트 반응형
<div className="w-full p-4 md:w-1/2 md:p-6 lg:w-1/3 lg:p-8">
<h2 className="text-lg md:text-xl lg:text-2xl">Responsive</h2>
</div>
// 다크 모드 지원
<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
Dark mode aware content
</div>
Using utility classes? → references/01-styling-with-utility-classes.md
Using hover, focus states? → references/02-hover-focus-and-other-states.md
Building responsive layouts? → references/03-responsive-design.md
Implementing dark mode? → references/04-dark-mode.md
dark: 변형 사용법Customizing theme? → references/05-theme-variables.md
@theme 디렉티브로 디자인 토큰 정의Using colors? → references/06-colors.md
bg-blue-500/50)currentColor)Adding custom styles? → references/07-adding-custom-styles.md
@theme 커스터마이징[값] 문법[property:value]@layer, @utility, @variant 디렉티브@apply로 유틸리티 추출Configuring class detection? → references/08-detecting-classes-in-source-files.md
@source 디렉티브로 명시적 경로 지정Using functions & directives? → references/09-functions-and-directives.md
@import, @theme, @source@utility, @variant, @custom-variant@apply, @reference, @layer--alpha(), --spacing() 함수npx claudepluginhub window-ook/claude-code-lab --plugin tailwind-cssTailwind CSS v4 utility-first discipline: CSS-first configuration, design tokens via @theme, and principled class composition. Invoke whenever task involves any interaction with Tailwind CSS — writing, reviewing, refactoring, debugging, or understanding utility classes, theme configuration, custom utilities, dark mode, or Tailwind integration with frameworks.
Provides Tailwind CSS v4 best practices: CSS-to-utility conversion, theme/color configuration, dark mode, responsive breakpoints, accessibility (focus-visible/ring), and v3-to-v4 migration.
Provides Tailwind CSS utility patterns for responsive layouts, flexbox, grid, typography, colors, and components. Use for styling React/Vue/Svelte apps, design systems, and CSS optimization.