| name | tailwind-patterns |
| description | Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | software-development |
| category | frontend |
| risk | unknown |
| source | community |
| tags | ["skill","software-development","frontend","tailwind"] |
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)
