메뉴
Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development. Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility classes.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | tailwindcss |
| description | Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development. Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility classes. |
| license | MIT |
| version | 1.0.0 |
Tailwind CSS is a utility-first CSS framework that enables rapid UI development by providing pre-built utility classes. It generates optimized CSS at build-time by scanning your project files, resulting in zero runtime overhead and minimal production bundles.
Use this skill when:
Tailwind provides low-level utility classes that you apply directly to HTML elements instead of writing custom CSS:
<!-- Traditional CSS approach -->
<div class="card">
<h2 class="card-title">Title</h2>
</div>
<!-- Tailwind utility-first approach -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold text-gray-900">Title</h2>
</div>
Benefits:
Tailwind scans your source files at build-time and generates only the CSS classes you actually use:
// Tailwind analyzes these files
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./app/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}"
]
Result: Optimized production bundles with zero runtime overhead.
Step 1: Install dependencies
npm install -D tailwindcss @tailwindcss/vite
# or
pnpm add -D tailwindcss @tailwindcss/vite
# or
yarn add -D tailwindcss @tailwindcss/vite
Step 2: Configure Vite
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()]
})
Step 3: Import in CSS
/* src/index.css */
@import "tailwindcss";
Step 4: Reference stylesheet in HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./src/index.css">
</head>
<body>
<div class="bg-blue-500 text-white p-4">Hello Tailwind!</div>
</body>
</html>
Next.js (App Router):
npx create-next-app@latest --tailwind
Next.js (Manual):
// tailwind.config.js
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
]
}
React with Vite:
npm create vite@latest my-app -- --template react
npm install -D tailwindcss @tailwindcss/vite
Vue:
npm install -D tailwindcss @tailwindcss/vite
Svelte:
npm install -D tailwindcss @tailwindcss/vite
Astro:
npx astro add tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
Tailwind includes a comprehensive default design system:
Use the @theme directive in CSS:
@import "tailwindcss";
@theme {
/* Custom colors */
--color-brand-50: oklch(0.97 0.02 264);
--color-brand-500: oklch(0.55 0.22 264);
--color-brand-900: oklch(0.25 0.15 264);
/* Custom fonts */
--font-display: "Satoshi", "Inter", sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* Custom spacing */
--spacing-18: calc(var(--spacing) * 18);
--spacing-navbar: 4.5rem;
/* Custom breakpoints */
--breakpoint-3xl: 120rem;
--breakpoint-4xl: 160rem;
/* Custom shadows */
--shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
}
Usage:
<div class="bg-brand-500 font-display shadow-glow">
Custom themed element
</div>
Using default colors:
<div class="bg-blue-500">Background</div>
<p class="text-red-600">Text</p>
<div class="border-green-400">Border</div>
Color scale:
Color opacity modifiers:
<div class="bg-black/75">75% opacity</div>
<div class="text-blue-500/30">30% opacity</div>
<div class="bg-purple-500/[0.87]">87% opacity</div>
Display:
<div class="block">Block</div>
<div class="inline-block">Inline Block</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>
Flexbox:
<div class="flex items-center justify-between gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div class="flex flex-col items-start">
<div>Vertical stack</div>
</div>
Grid:
<div class="grid grid-cols-3 gap-4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
<div class="grid grid-cols-[1fr_500px_2fr] gap-6">
<div>Flexible</div>
<div>Fixed 500px</div>
<div>More flexible</div>
</div>
Positioning:
<div class="relative">
<div class="absolute top-0 right-0">Positioned</div>
</div>
<div class="fixed bottom-4 right-4">Fixed</div>
<div class="sticky top-0">Sticky header</div>
Padding & Margin:
<div class="p-4">Padding all sides</div>
<div class="px-6 py-3">Padding X and Y</div>
<div class="pt-8 pb-4">Padding top/bottom</div>
<div class="m-4">Margin all sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="-mt-4">Negative margin</div>
Gap (Flexbox/Grid):
<div class="flex gap-4">Flex with gap</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-4">Grid with X/Y gap</div>
Font Size:
<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2XL</p>
<h1 class="text-4xl font-bold">Heading</h1>
Font Weight:
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
Text Alignment:
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified</p>
Line Height:
<p class="leading-tight">Tight line height</p>
<p class="leading-normal">Normal line height</p>
<p class="leading-relaxed">Relaxed line height</p>
Combining font utilities:
<h1 class="text-4xl/tight font-bold">
Font size 4xl with tight line-height
</h1>
Background colors:
<div class="bg-white">White background</div>
<div class="bg-gray-100">Gray background</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
Gradient background
</div>
Text colors:
<p class="text-gray-900">Dark text</p>
<p class="text-blue-600">Blue text</p>
<a class="text-blue-500 hover:text-blue-700">Link</a>
<div class="border">Default border</div>
<div class="border-2 border-gray-300">2px border</div>
<div class="border-t border-b-2">Top and bottom borders</div>
<div class="rounded">Rounded corners</div>
<div class="rounded-lg">Large rounded</div>
<div class="rounded-full">Fully rounded</div>
<div class="border border-red-500 rounded-md">Combined</div>
<div class="shadow">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-none">No shadow</div>
Tailwind uses a mobile-first approach. Base styles apply to all screen sizes, then use breakpoint prefixes to override at larger sizes:
Breakpoints:
sm: - 640px and upmd: - 768px and uplg: - 1024px and upxl: - 1280px and up2xl: - 1536px and upExample:
<!-- Mobile: 1 column, Tablet: 2 columns, Desktop: 4 columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">Desktop only content</div>
<!-- Show on mobile, hide on desktop -->
<div class="block lg:hidden">Mobile only content</div>
<!-- Responsive text sizes -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
Responsive heading
</h1>
@theme {
--breakpoint-3xl: 120rem;
--breakpoint-tablet: 48rem;
}
<div class="tablet:grid-cols-2 3xl:grid-cols-6">
Custom breakpoints
</div>
<!-- Only apply styles below 768px -->
<div class="flex max-md:hidden">Hidden on mobile</div>
<!-- Between breakpoints -->
<div class="md:block lg:hidden">Only visible on tablets</div>
Style elements based on parent container width:
<div class="@container">
<div class="@md:grid-cols-2 @lg:grid-cols-3">
Responds to parent width
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white">
Hover me
</button>
<a class="text-blue-600 hover:underline">
Hover link
</a>
<div class="scale-100 hover:scale-105 transition-transform">
Scale on hover
</div>
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />
<button class="bg-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-300">
Accessible button
</button>
<button class="bg-blue-500 active:bg-blue-800">
Click me
</button>
<button class="bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
Disabled button
</button>
<input class="disabled:bg-gray-100" disabled />
<input class="invalid:border-red-500 focus:invalid:ring-red-200" required />
<input class="placeholder:text-gray-400 placeholder:italic" placeholder="Search..." />
<input type="checkbox" class="checked:bg-blue-500" />
<div class="group hover:bg-gray-100">
<p class="group-hover:text-blue-600">
Text changes when parent is hovered
</p>
<img class="group-hover:opacity-50" src="..." />
</div>
<input type="checkbox" class="peer" id="terms" />
<label for="terms" class="peer-checked:text-blue-600">
I accept terms
</label>
<input type="email" class="peer" required />
<p class="hidden peer-invalid:block text-red-600">
Invalid email
</p>
Media query approach (automatic):
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
Auto switches based on system preference
</div>
Class-based approach (manual toggle):
// Add .dark class to <html> element
document.documentElement.classList.toggle('dark')
<!-- Colors -->
<div class="bg-white dark:bg-slate-900">Background</div>
<p class="text-gray-900 dark:text-gray-100">Text</p>
<!-- Borders -->
<div class="border-gray-200 dark:border-gray-700">Border</div>
<!-- Complete example -->
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
Dark mode card
</h2>
<p class="text-gray-600 dark:text-gray-300">
Content adapts to theme
</p>
</div>
// Store preference
function toggleDarkMode() {
const isDark = document.documentElement.classList.toggle('dark')
localStorage.setItem('theme', isDark ? 'dark' : 'light')
}
// Initialize on load
if (localStorage.theme === 'dark' ||
(!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
}
Use square brackets for one-off custom values:
Pixel values:
<div class="top-[117px]">Custom position</div>
<p class="text-[22px]">Custom font size</p>
<div class="w-[500px]">Custom width</div>
Colors:
<div class="bg-[#bada55]">Custom hex color</div>
<div class="text-[rgb(123,45,67)]">RGB color</div>
<div class="bg-[oklch(0.55_0.22_264)]">OKLCH color</div>
CSS variables:
<div class="bg-[var(--my-brand-color)]">CSS variable</div>
<div class="text-[length:var(--my-font-size)]">Type hint</div>
Complex values:
<div class="grid-cols-[1fr_500px_2fr]">Custom grid</div>
<div class="content-['>']">Custom content</div>
<div class="[mask-type:luminance]">Custom property</div>
<button class="bg-blue-500 transition-colors hover:bg-blue-700">
Smooth color transition
</button>
<div class="transform transition-transform hover:scale-110">
Scale with transition
</div>
<div class="transition-all duration-300 ease-in-out hover:shadow-lg">
Multiple transitions
</div>
<!-- Duration options -->
<div class="transition duration-150">Fast</div>
<div class="transition duration-300">Normal</div>
<div class="transition duration-500">Slow</div>
<!-- Scale -->
<div class="scale-95 hover:scale-100">Scale</div>
<!-- Rotate -->
<div class="rotate-45">Rotate 45deg</div>
<div class="hover:rotate-6">Slight rotation</div>
<!-- Translate -->
<div class="translate-x-4 translate-y-2">Move</div>
<!-- Skew -->
<div class="skew-x-12">Skew</div>
<!-- Combined -->
<div class="transform scale-110 rotate-3 translate-x-2">
Multiple transforms
</div>
<div class="animate-spin">Spinning</div>
<div class="animate-ping">Pinging</div>
<div class="animate-pulse">Pulsing</div>
<div class="animate-bounce">Bouncing</div>
@theme {
--animate-slide-in: slide-in 0.5s ease-out;
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
<div class="animate-slide-in">Custom animation</div>
Create reusable utility classes:
@utility content-auto {
content-visibility: auto;
}
@utility tab-* {
tab-size: var(--tab-size-*);
}
<div class="content-auto">Custom utility</div>
<pre class="tab-4">Custom tab size</pre>
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
@custom-variant aria-checked (&[aria-checked="true"]);
<div theme-midnight:bg-navy-900>
Applies when data-theme="midnight"
</div>
@layer base {
h1 {
@apply text-4xl font-bold;
}
body {
@apply bg-white text-gray-900;
}
}
@layer components {
.btn {
@apply px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-700;
}
.card {
@apply bg-white rounded-lg shadow-md p-6;
}
}
Extract repeated utilities into CSS classes:
.btn-primary {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
.input-field {
@apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
}
<!-- Primary button -->
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed">
Click me
</button>
<!-- Secondary button -->
<button class="bg-white hover:bg-gray-50 border-2 border-gray-300 text-gray-700 font-semibold px-6 py-3 rounded-lg">
Secondary
</button>
<!-- Icon button -->
<button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
<svg class="w-6 h-6">...</svg>
</button>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
<img class="w-full h-48 object-cover" src="..." alt="Card image" />
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
Card Title
</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
Card description text goes here
</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg">
Learn More
</button>
</div>
</div>
<form class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">
Email
</label>
<input
type="email"
id="email"
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
placeholder="you@example.com"
/>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">
Password
</label>
<input
type="password"
id="password"
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 invalid:border-red-500 dark:bg-gray-700 dark:text-white"
/>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-colors">
Sign In
</button>
</form>
<nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-8">
<a href="/" class="text-2xl font-bold text-blue-600">Logo</a>
<div class="hidden md:flex gap-6">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors">Services</a>
</div>
</div>
<button class="md:hidden p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6">...</svg>
</button>
</div>
</div>
</nav>
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div class="bg-white rounded-lg shadow-md p-6">Item 1</div>
<div class="bg-white rounded-lg shadow-md p-6">Item 2</div>
<div class="bg-white rounded-lg shadow-md p-6">Item 3</div>
<div class="bg-white rounded-lg shadow-md p-6">Item 4</div>
</div>
</div>
<!-- Good: Use spacing scale -->
<div class="p-4 mb-6">
<!-- Avoid: Arbitrary values unless necessary -->
<div class="p-[17px] mb-[23px]">
<!-- Good: Use semantic color names -->
<button class="bg-blue-600 hover:bg-blue-700">
<!-- Avoid: One-off colors -->
<button class="bg-[#3B82F6] hover:bg-[#2563EB]">
<!-- Good: Mobile first, then scale up -->
<div class="text-base md:text-lg lg:text-xl">
<!-- Avoid: Desktop first -->
<div class="text-xl lg:text-base">
// React component with Tailwind
function Button({ children, variant = 'primary' }) {
const baseClasses = "font-semibold px-6 py-3 rounded-lg transition-colors"
const variants = {
primary: "bg-blue-600 hover:bg-blue-700 text-white",
secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900"
}
return (
<button className={`${baseClasses} ${variants[variant]}`}>
{children}
</button>
)
}
/* Only use @apply for truly repeated patterns */
@layer components {
.card {
@apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
}
}
<button class="focus:outline-none focus:ring-4 focus:ring-blue-300">
Accessible button
</button>
<a class="text-blue-600 hover:underline focus:outline-2 focus:outline-offset-2">
Accessible link
</a>
class={text-${color}-500} won't work<!-- Ensure all elements have dark mode variants -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700">
Complete dark mode support
</div>
<!-- Horizontal center -->
<div class="flex justify-center">Content</div>
<div class="mx-auto w-fit">Content</div>
<!-- Vertical center -->
<div class="flex items-center h-screen">Content</div>
<!-- Center both axes -->
<div class="flex items-center justify-center h-screen">
Centered content
</div>
<div class="container mx-auto px-4 max-w-7xl">
Content with consistent max width
</div>
<div class="aspect-square">Square</div>
<div class="aspect-video">16:9 video</div>
<div class="aspect-[4/3]">4:3 ratio</div>
<p class="truncate">Long text that will be truncated with ellipsis...</p>
<p class="line-clamp-3">
Long text that will be truncated after 3 lines with ellipsis...
</p>
<html class="scroll-smooth">
<a href="#section">Smooth scroll to section</a>
</html>
// tailwind.config.js
content: [
"./src/**/*.{js,jsx,ts,tsx}",
// Add all file paths where you use Tailwind
]
// ❌ Won't work
const color = 'blue'
<div className={`text-${color}-500`} />
// ✅ Works
<div className={color === 'blue' ? 'text-blue-500' : 'text-red-500'} />
/* Use !important sparingly */
<div class="!text-red-500">Overrides other styles</div>
# Clear cache and rebuild
rm -rf .next node_modules/.cache
npm run dev
Install official extension:
.vscode/settings.json:{
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}
export function Card({ title, description }) {
return (
<div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<h3 className="text-2xl font-bold mb-2">{title}</h3>
<p className="text-gray-600">{description}</p>
</div>
)
}
<template>
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<h3 class="text-2xl font-bold mb-2">{{ title }}</h3>
<p class="text-gray-600">{{ description }}</p>
</div>
</template>
<script setup>
defineProps(['title', 'description'])
</script>
<script>
export let title
export let description
</script>
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<h3 class="text-2xl font-bold mb-2">{title}</h3>
<p class="text-gray-600">{description}</p>
</div>
When implementing Tailwind CSS:
tailwindcss and framework-specific plugin进行系统化的代码审查，检查代码质量、安全性和性能。当用户要求审查代码、review 或检查代码时使用
将当前分支部署到测试环境。当用户要求部署、发布到测试或在 staging 环境测试时使用
生成符合 Conventional Commits 规范的 Git 提交信息。当用户要求生成提交、创建 commit 或写提交信息时使用
生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用
Guide for implementing Better Auth - a framework-agnostic authentication and authorization framework for TypeScript. Use when adding authentication features like email/password, OAuth, 2FA, passkeys, or advanced auth functionality to applications.
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.