---
name: tailwind-patterns
type: reference
description: "Provides Tailwind CSS v4 patterns for CSS-first configuration, container queries, design tokens, and utility-first component architecture. Use when working with Tailwind CSS files or when the user mentions Tailwind, Tailwind v4, or utility-first CSS."
paths: ["/*.tsx", "/.jsx", "**/.css", "**/tailwind.config.*"]
when_to_use: "When writing Tailwind CSS v4, configuring design tokens, implementing container queries, or building responsive layouts"
allowed-tools: Read, Glob, Grep
user-invocable: true
effort: 3
Tailwind CSS Patterns (v4 - 2025)
Modern utility-first CSS with CSS-native configuration.
When to Use
Use this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns.
1. Tailwind v4 Architecture
What Changed from v3
| v3 (Legacy) |
v4 (Current) |
tailwind.config.js |
CSS-based @theme directive |
| PostCSS plugin |
Oxide engine (10x faster) |
| JIT mode |
Native, always-on |
| Plugin system |
CSS-native features |
@apply directive |
Still works, discouraged |
v4 Core Concepts
| Concept |
Description |
| CSS-first |
Configuration in CSS, not JavaScript |
| Oxide Engine |
Rust-based compiler, much faster |
| Native Nesting |
CSS nesting without PostCSS |
| CSS Variables |
All tokens exposed as --* vars |
2. CSS-Based Configuration
Theme Definition
@theme {
/* Colors - use semantic names */
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
/* Spacing scale */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
When to Extend vs Override
| Action |
Use When |
| Extend |
Adding new values alongside defaults |
| Override |
Replacing default scale entirely |
| Semantic tokens |
Project-specific naming (primary, surface) |
3. Container Queries (v4 Native)
Breakpoint vs Container
| Type |
Responds To |
Breakpoint (md:) |
Viewport width |
Container (@container) |
Parent element width |
Container Query Usage
| Pattern |
Classes |
| Define container |
@container on parent |
| Container breakpoint |
@sm:, @md:, @lg: on children |
| Named containers |
@container/card for specificity |
When to Use
| Scenario |
Use |
| Page-level layouts |
Viewport breakpoints |
| Component-level responsive |
Container queries |
| Reusable components |
Container queries (context-independent) |
4. Responsive Design
Breakpoint System
| Prefix |
Min Width |
Target |
| (none) |
0px |
Mobile-first base |
sm: |
640px |
Large phone / small tablet |
md: |
768px |
Tablet |
lg: |
1024px |
Laptop |
xl: |
1280px |
Desktop |
2xl: |
1536px |
Large desktop |
Mobile-First Principle
- Write mobile styles first (no prefix)
- Add larger screen overrides with prefixes
- Example:
w-full md:w-1/2 lg:w-1/3
5. Dark Mode
Configuration Strategies
| Method |
Behavior |
Use When |
class |
.dark class toggles |
Manual theme switcher |
media |
Follows system preference |
No user control |
selector |
Custom selector (v4) |
Complex theming |
Dark Mode Pattern
| Element |
Light |
Dark |
| Background |
bg-white |
dark:bg-zinc-900 |
| Text |
text-zinc-900 |
dark:text-zinc-100 |
| Borders |
border-zinc-200 |
dark:border-zinc-700 |
6. Modern Layout Patterns
Flexbox Patterns
| Pattern |
Classes |
| Center (both axes) |
flex items-center justify-center |
| Vertical stack |
flex flex-col gap-4 |
| Horizontal row |
flex gap-4 |
| Space between |
flex justify-between items-center |
| Wrap grid |
flex flex-wrap gap-4 |
Grid Patterns
| Pattern |
Classes |
| Auto-fit responsive |
grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| Asymmetric (Bento) |
grid grid-cols-3 grid-rows-2 with spans |
| Sidebar layout |
grid grid-cols-[auto_1fr] |
Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.
7. Modern Color System
OKLCH vs RGB/HSL
| Format |
Advantage |
| OKLCH |
Perceptually uniform, better for design |
| HSL |
Intuitive hue/saturation |
| RGB |
Legacy compatibility |
Color Token Architecture
| Layer |
Example |
Purpose |
| Primitive |
--blue-500 |
Raw color values |
| Semantic |
--color-primary |
Purpose-based naming |
| Component |
--button-bg |
Component-specific |
8. Typography System
Font Stack Pattern
| Type |
Recommended |
| Sans |
'Inter', 'SF Pro', system-ui, sans-serif |
| Mono |
'JetBrains Mono', 'Fira Code', monospace |
| Display |
'Outfit', 'Poppins', sans-serif |
Type Scale
| Class |
Size |
Use |
text-xs |
0.75rem |
Labels, captions |
text-sm |
0.875rem |
Secondary text |
text-base |
1rem |
Body text |
text-lg |
1.125rem |
Lead text |
text-xl+ |
1.25rem+ |
Headings |
9. Animation & Transitions
Built-in Animations
| Class |
Effect |
animate-spin |
Continuous rotation |
animate-ping |
Attention pulse |
animate-pulse |
Subtle opacity pulse |
animate-bounce |
Bouncing effect |
Transition Patterns
| Pattern |
Classes |
| All properties |
transition-all duration-200 |
| Specific |
transition-colors duration-150 |
| With easing |
ease-out or ease-in-out |
| Hover effect |
hover:scale-105 transition-transform |
10. Component Extraction
When to Extract
| Signal |
Action |
| Same class combo 3+ times |
Extract component |
| Complex state variants |
Extract component |
| Design system element |
Extract + document |
Extraction Methods
| Method |
Use When |
| React/Vue component |
Dynamic, JS needed |
| @apply in CSS |
Static, no JS needed |
| Design tokens |
Reusable values |
11. Anti-Patterns
| Don't |
Do |
| Arbitrary values everywhere |
Use design system scale |
!important |
Fix specificity properly |
Inline style= |
Use utilities |
| Duplicate long class lists |
Extract component |
| Mix v3 config with v4 |
Migrate fully to CSS-first |
Use @apply heavily |
Prefer components |
12. Performance Principles
| Principle |
Implementation |
| Purge unused |
Automatic in v4 |
| Avoid dynamism |
No template string classes |
| Use Oxide |
Default in v4, 10x faster |
| Cache builds |
CI/CD caching |
Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.
1---2name: tailwind-patterns3description: ---4---5---6name: tailwind-patterns7type: reference8description: "Provides Tailwind CSS v4 patterns for CSS-first configuration, container queries, design tokens, and utility-first component architecture. Use when working with Tailwind CSS files or when the user mentions Tailwind, Tailwind v4, or utility-first CSS."9paths: ["**/*.tsx", "**/*.jsx", "**/*.css", "**/tailwind.config.*"]10when_to_use: "When writing Tailwind CSS v4, configuring design tokens, implementing container queries, or building responsive layouts"11allowed-tools: Read, Glob, Grep12user-invocable: true13effort: 314---1516# Tailwind CSS Patterns (v4 - 2025)1718> Modern utility-first CSS with CSS-native configuration.1920## When to Use2122Use this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns.2324---2526## 1. Tailwind v4 Architecture2728### What Changed from v32930| v3 (Legacy) | v4 (Current) |31|-------------|--------------|32| `tailwind.config.js` | CSS-based `@theme` directive |33| PostCSS plugin | Oxide engine (10x faster) |34| JIT mode | Native, always-on |35| Plugin system | CSS-native features |36| `@apply` directive | Still works, discouraged |3738### v4 Core Concepts3940| Concept | Description |41|---------|-------------|42| **CSS-first** | Configuration in CSS, not JavaScript |43| **Oxide Engine** | Rust-based compiler, much faster |44| **Native Nesting** | CSS nesting without PostCSS |45| **CSS Variables** | All tokens exposed as `--*` vars |4647---4849## 2. CSS-Based Configuration5051### Theme Definition5253```54@theme {55 /* Colors - use semantic names */56 --color-primary: oklch(0.7 0.15 250);57 --color-surface: oklch(0.98 0 0);58 --color-surface-dark: oklch(0.15 0 0);59 60 /* Spacing scale */61 --spacing-xs: 0.25rem;62 --spacing-sm: 0.5rem;63 --spacing-md: 1rem;64 --spacing-lg: 2rem;65 66 /* Typography */67 --font-sans: 'Inter', system-ui, sans-serif;68 --font-mono: 'JetBrains Mono', monospace;69}70```7172### When to Extend vs Override7374| Action | Use When |75|--------|----------|76| **Extend** | Adding new values alongside defaults |77| **Override** | Replacing default scale entirely |78| **Semantic tokens** | Project-specific naming (primary, surface) |7980---8182## 3. Container Queries (v4 Native)8384### Breakpoint vs Container8586| Type | Responds To |87|------|-------------|88| **Breakpoint** (`md:`) | Viewport width |89| **Container** (`@container`) | Parent element width |9091### Container Query Usage9293| Pattern | Classes |94|---------|---------|95| Define container | `@container` on parent |96| Container breakpoint | `@sm:`, `@md:`, `@lg:` on children |97| Named containers | `@container/card` for specificity |9899### When to Use100101| Scenario | Use |102|----------|-----|103| Page-level layouts | Viewport breakpoints |104| Component-level responsive | Container queries |105| Reusable components | Container queries (context-independent) |106107---108109## 4. Responsive Design110111### Breakpoint System112113| Prefix | Min Width | Target |114|--------|-----------|--------|115| (none) | 0px | Mobile-first base |116| `sm:` | 640px | Large phone / small tablet |117| `md:` | 768px | Tablet |118| `lg:` | 1024px | Laptop |119| `xl:` | 1280px | Desktop |120| `2xl:` | 1536px | Large desktop |121122### Mobile-First Principle1231241. Write mobile styles first (no prefix)1252. Add larger screen overrides with prefixes1263. Example: `w-full md:w-1/2 lg:w-1/3`127128---129130## 5. Dark Mode131132### Configuration Strategies133134| Method | Behavior | Use When |135|--------|----------|----------|136| `class` | `.dark` class toggles | Manual theme switcher |137| `media` | Follows system preference | No user control |138| `selector` | Custom selector (v4) | Complex theming |139140### Dark Mode Pattern141142| Element | Light | Dark |143|---------|-------|------|144| Background | `bg-white` | `dark:bg-zinc-900` |145| Text | `text-zinc-900` | `dark:text-zinc-100` |146| Borders | `border-zinc-200` | `dark:border-zinc-700` |147148---149150## 6. Modern Layout Patterns151152### Flexbox Patterns153154| Pattern | Classes |155|---------|---------|156| Center (both axes) | `flex items-center justify-center` |157| Vertical stack | `flex flex-col gap-4` |158| Horizontal row | `flex gap-4` |159| Space between | `flex justify-between items-center` |160| Wrap grid | `flex flex-wrap gap-4` |161162### Grid Patterns163164| Pattern | Classes |165|---------|---------|166| Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` |167| Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans |168| Sidebar layout | `grid grid-cols-[auto_1fr]` |169170> **Note:** Prefer asymmetric/Bento layouts over symmetric 3-column grids.171172---173174## 7. Modern Color System175176### OKLCH vs RGB/HSL177178| Format | Advantage |179|--------|-----------|180| **OKLCH** | Perceptually uniform, better for design |181| **HSL** | Intuitive hue/saturation |182| **RGB** | Legacy compatibility |183184### Color Token Architecture185186| Layer | Example | Purpose |187|-------|---------|---------|188| **Primitive** | `--blue-500` | Raw color values |189| **Semantic** | `--color-primary` | Purpose-based naming |190| **Component** | `--button-bg` | Component-specific |191192---193194## 8. Typography System195196### Font Stack Pattern197198| Type | Recommended |199|------|-------------|200| Sans | `'Inter', 'SF Pro', system-ui, sans-serif` |201| Mono | `'JetBrains Mono', 'Fira Code', monospace` |202| Display | `'Outfit', 'Poppins', sans-serif` |203204### Type Scale205206| Class | Size | Use |207|-------|------|-----|208| `text-xs` | 0.75rem | Labels, captions |209| `text-sm` | 0.875rem | Secondary text |210| `text-base` | 1rem | Body text |211| `text-lg` | 1.125rem | Lead text |212| `text-xl`+ | 1.25rem+ | Headings |213214---215216## 9. Animation & Transitions217218### Built-in Animations219220| Class | Effect |221|-------|--------|222| `animate-spin` | Continuous rotation |223| `animate-ping` | Attention pulse |224| `animate-pulse` | Subtle opacity pulse |225| `animate-bounce` | Bouncing effect |226227### Transition Patterns228229| Pattern | Classes |230|---------|---------|231| All properties | `transition-all duration-200` |232| Specific | `transition-colors duration-150` |233| With easing | `ease-out` or `ease-in-out` |234| Hover effect | `hover:scale-105 transition-transform` |235236---237238## 10. Component Extraction239240### When to Extract241242| Signal | Action |243|--------|--------|244| Same class combo 3+ times | Extract component |245| Complex state variants | Extract component |246| Design system element | Extract + document |247248### Extraction Methods249250| Method | Use When |251|--------|----------|252| **React/Vue component** | Dynamic, JS needed |253| **@apply in CSS** | Static, no JS needed |254| **Design tokens** | Reusable values |255256---257258## 11. Anti-Patterns259260| Don't | Do |261|-------|-----|262| Arbitrary values everywhere | Use design system scale |263| `!important` | Fix specificity properly |264| Inline `style=` | Use utilities |265| Duplicate long class lists | Extract component |266| Mix v3 config with v4 | Migrate fully to CSS-first |267| Use `@apply` heavily | Prefer components |268269---270271## 12. Performance Principles272273| Principle | Implementation |274|-----------|----------------|275| **Purge unused** | Automatic in v4 |276| **Avoid dynamism** | No template string classes |277| **Use Oxide** | Default in v4, 10x faster |278| **Cache builds** | CI/CD caching |279280---281282> **Remember:** Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.
tranhieutt