{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/tailwind-patterns",
  "version": "1.0.0",
  "name": "Tailwind Patterns",
  "description": "Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.",
  "system_prompt_fragment": "# Tailwind CSS Patterns (v4 - 2025)\n\n> Modern utility-first CSS with CSS-native configuration.\n\n## When to Use\n\nUse this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns.\n\n---\n\n## 1. Tailwind v4 Architecture\n\n### What Changed from v3\n\n| v3 (Legacy) | v4 (Current) |\n|-------------|--------------|\n| `tailwind.config.js` | CSS-based `@theme` directive |\n| PostCSS plugin | Oxide engine (10x faster) |\n| JIT mode | Native, always-on |\n| Plugin system | CSS-native features |\n| `@apply` directive | Still works, discouraged |\n\n### v4 Core Concepts\n\n| Concept | Description |\n|---------|-------------|\n| **CSS-first** | Configuration in CSS, not JavaScript |\n| **Oxide Engine** | Rust-based compiler, much faster |\n| **Native Nesting** | CSS nesting without PostCSS |\n| **CSS Variables** | All tokens exposed as `--*` vars |\n\n---\n\n## 2. CSS-Based Configuration\n\n### Theme Definition\n\n```\n@theme {\n  /* Colors - use semantic names */\n  --color-primary: oklch(0.7 0.15 250);\n  --color-surface: oklch(0.98 0 0);\n  --color-surface-dark: oklch(0.15 0 0);\n  \n  /* Spacing scale */\n  --spacing-xs: 0.25rem;\n  --spacing-sm: 0.5rem;\n  --spacing-md: 1rem;\n  --spacing-lg: 2rem;\n  \n  /* Typography */\n  --font-sans: 'Inter', system-ui, sans-serif;\n  --font-mono: 'JetBrains Mono', monospace;\n}\n```\n\n### When to Extend vs Override\n\n| Action | Use When |\n|--------|----------|\n| **Extend** | Adding new values alongside defaults |\n| **Override** | Replacing default scale entirely |\n| **Semantic tokens** | Project-specific naming (primary, surface) |\n\n---\n\n## 3. Container Queries (v4 Native)\n\n### Breakpoint vs Container\n\n| Type | Responds To |\n|------|-------------|\n| **Breakpoint** (`md:`) | Viewport width |\n| **Container** (`@container`) | Parent element width |\n\n### Container Query Usage\n\n| Pattern | Classes |\n|---------|---------|\n| Define container | `@container` on parent |\n| Container breakpoint | `@sm:`, `@md:`, `@lg:` on children |\n| Named containers | `@container/card` for specificity |\n\n### When to Use\n\n| Scenario | Use |\n|----------|-----|\n| Page-level layouts | Viewport breakpoints |\n| Component-level responsive | Container queries |\n| Reusable components | Container queries (context-independent) |\n\n---\n\n## 4. Responsive Design\n\n### Breakpoint System\n\n| Prefix | Min Width | Target |\n|--------|-----------|--------|\n| (none) | 0px | Mobile-first base |\n| `sm:` | 640px | Large phone / small tablet |\n| `md:` | 768px | Tablet |\n| `lg:` | 1024px | Laptop |\n| `xl:` | 1280px | Desktop |\n| `2xl:` | 1536px | Large desktop |\n\n### Mobile-First Principle\n\n1. Write mobile styles first (no prefix)\n2. Add larger screen overrides with prefixes\n3. Example: `w-full md:w-1/2 lg:w-1/3`\n\n---\n\n## 5. Dark Mode\n\n### Configuration Strategies\n\n| Method | Behavior | Use When |\n|--------|----------|----------|\n| `class` | `.dark` class toggles | Manual theme switcher |\n| `media` | Follows system preference | No user control |\n| `selector` | Custom selector (v4) | Complex theming |\n\n### Dark Mode Pattern\n\n| Element | Light | Dark |\n|---------|-------|------|\n| Background | `bg-white` | `dark:bg-zinc-900` |\n| Text | `text-zinc-900` | `dark:text-zinc-100` |\n| Borders | `border-zinc-200` | `dark:border-zinc-700` |\n\n---\n\n## 6. Modern Layout Patterns\n\n### Flexbox Patterns\n\n| Pattern | Classes |\n|---------|---------|\n| Center (both axes) | `flex items-center justify-center` |\n| Vertical stack | `flex flex-col gap-4` |\n| Horizontal row | `flex gap-4` |\n| Space between | `flex justify-between items-center` |\n| Wrap grid | `flex flex-wrap gap-4` |\n\n### Grid Patterns\n\n| Pattern | Classes |\n|---------|---------|\n| Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` |\n| Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans |\n| Sidebar layout | `grid grid-cols-[auto_1fr]` |\n\n> **Note:** Prefer asymmetric/Bento layouts over symmetric 3-column grids.\n\n---\n\n## 7. Modern Color System\n\n### OKLCH vs RGB/HSL\n\n| Format | Advantage |\n|--------|-----------|\n| **OKLCH** | Perceptually uniform, better for design |\n| **HSL** | Intuitive hue/saturation |\n| **RGB** | Legacy compatibility |\n\n### Color Token Architecture\n\n| Layer | Example | Purpose |\n|-------|---------|---------|\n| **Primitive** | `--blue-500` | Raw color values |\n| **Semantic** | `--color-primary` | Purpose-based naming |\n| **Component** | `--button-bg` | Component-specific |\n\n---\n\n## 8. Typography System\n\n### Font Stack Pattern\n\n| Type | Recommended |\n|------|-------------|\n| Sans | `'Inter', 'SF Pro', system-ui, sans-serif` |\n| Mono | `'JetBrains Mono', 'Fira Code', monospace` |\n| Display | `'Outfit', 'Poppins', sans-serif` |\n\n### Type Scale\n\n| Class | Size | Use |\n|-------|------|-----|\n| `text-xs` | 0.75rem | Labels, captions |\n| `text-sm` | 0.875rem | Secondary text |\n| `text-base` | 1rem | Body text |\n| `text-lg` | 1.125rem | Lead text |\n| `text-xl`+ | 1.25rem+ | Headings |\n\n---\n\n## 9. Animation & Transitions\n\n### Built-in Animations\n\n| Class | Effect |\n|-------|--------|\n| `animate-spin` | Continuous rotation |\n| `animate-ping` | Attention pulse |\n| `animate-pulse` | Subtle opacity pulse |\n| `animate-bounce` | Bouncing effect |\n\n### Transition Patterns\n\n| Pattern | Classes |\n|---------|---------|\n| All properties | `transition-all duration-200` |\n| Specific | `transition-colors duration-150` |\n| With easing | `ease-out` or `ease-in-out` |\n| Hover effect | `hover:scale-105 transition-transform` |\n\n---\n\n## 10. Component Extraction\n\n### When to Extract\n\n| Signal | Action |\n|--------|--------|\n| Same class combo 3+ times | Extract component |\n| Complex state variants | Extract component |\n| Design system element | Extract + document |\n\n### Extraction Methods\n\n| Method | Use When |\n|--------|----------|\n| **React/Vue component** | Dynamic, JS needed |\n| **@apply in CSS** | Static, no JS needed |\n| **Design tokens** | Reusable values |\n\n---\n\n## 11. Anti-Patterns\n\n| Don't | Do |\n|-------|-----|\n| Arbitrary values everywhere | Use design system scale |\n| `!important` | Fix specificity properly |\n| Inline `style=` | Use utilities |\n| Duplicate long class lists | Extract component |\n| Mix v3 config with v4 | Migrate fully to CSS-first |\n| Use `@apply` heavily | Prefer components |\n\n---\n\n## 12. Performance Principles\n\n| Principle | Implementation |\n|-----------|----------------|\n| **Purge unused** | Automatic in v4 |\n| **Avoid dynamism** | No template string classes |\n| **Use Oxide** | Default in v4, 10x faster |\n| **Cache builds** | CI/CD caching |\n\n---\n\n> **Remember:** Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.",
  "applicable_domains": [
    "frontend"
  ],
  "category": "frontend",
  "invocation": [
    "/tailwind-patterns"
  ],
  "authored_by": "claudeskills.in community",
  "source_url": "https://claudeskills.in/skill/tailwind-patterns",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/tailwind-patterns",
    "license": "unknown",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists."
  },
  "tags": [
    "claudeskills",
    "frontend"
  ],
  "lifecycle": "draft"
}