tailwind-patterns
starsforks
How to install tailwind-patterns?
one-man-company/skills-contextmanager/tailwind-patterns
$npx -y skills add One-Man-Company/Skills-ContextManager --skill tailwind-patternsTailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
SKILL.md
| 1 | # Tailwind CSS Patterns (v4 - 2025) |
| 2 | |
| 3 | > Modern utility-first CSS with CSS-native configuration. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Tailwind v4 Architecture |
| 8 | |
| 9 | ### What Changed from v3 |
| 10 | |
| 11 | | v3 (Legacy) | v4 (Current) | |
| 12 | |-------------|--------------| |
| 13 | | `tailwind.config.js` | CSS-based `@theme` directive | |
| 14 | | PostCSS plugin | Oxide engine (10x faster) | |
| 15 | | JIT mode | Native, always-on | |
| 16 | | Plugin system | CSS-native features | |
| 17 | | `@apply` directive | Still works, discouraged | |
| 18 | |
| 19 | ### v4 Core Concepts |
| 20 | |
| 21 | | Concept | Description | |
| 22 | |---------|-------------| |
| 23 | | **CSS-first** | Configuration in CSS, not JavaScript | |
| 24 | | **Oxide Engine** | Rust-based compiler, much faster | |
| 25 | | **Native Nesting** | CSS nesting without PostCSS | |
| 26 | | **CSS Variables** | All tokens exposed as `--*` vars | |
| 27 | |
| 28 | --- |
| 29 | |
| 30 | ## 2. CSS-Based Configuration |
| 31 | |
| 32 | ### Theme Definition |
| 33 | |
| 34 | ``` |
| 35 | @theme { |
| 36 | /* Colors - use semantic names */ |
| 37 | --color-primary: oklch(0.7 0.15 250); |
| 38 | --color-surface: oklch(0.98 0 0); |
| 39 | --color-surface-dark: oklch(0.15 0 0); |
| 40 | |
| 41 | /* Spacing scale */ |
| 42 | --spacing-xs: 0.25rem; |
| 43 | --spacing-sm: 0.5rem; |
| 44 | --spacing-md: 1rem; |
| 45 | --spacing-lg: 2rem; |
| 46 | |
| 47 | /* Typography */ |
| 48 | --font-sans: 'Inter', system-ui, sans-serif; |
| 49 | --font-mono: 'JetBrains Mono', monospace; |
| 50 | } |
| 51 | ``` |
| 52 | |
| 53 | ### When to Extend vs Override |
| 54 | |
| 55 | | Action | Use When | |
| 56 | |--------|----------| |
| 57 | | **Extend** | Adding new values alongside defaults | |
| 58 | | **Override** | Replacing default scale entirely | |
| 59 | | **Semantic tokens** | Project-specific naming (primary, surface) | |
| 60 | |
| 61 | --- |
| 62 | |
| 63 | ## 3. Container Queries (v4 Native) |
| 64 | |
| 65 | ### Breakpoint vs Container |
| 66 | |
| 67 | | Type | Responds To | |
| 68 | |------|-------------| |
| 69 | | **Breakpoint** (`md:`) | Viewport width | |
| 70 | | **Container** (`@container`) | Parent element width | |
| 71 | |
| 72 | ### Container Query Usage |
| 73 | |
| 74 | | Pattern | Classes | |
| 75 | |---------|---------| |
| 76 | | Define container | `@container` on parent | |
| 77 | | Container breakpoint | `@sm:`, `@md:`, `@lg:` on children | |
| 78 | | Named containers | `@container/card` for specificity | |
| 79 | |
| 80 | ### When to Use |
| 81 | |
| 82 | | Scenario | Use | |
| 83 | |----------|-----| |
| 84 | | Page-level layouts | Viewport breakpoints | |
| 85 | | Component-level responsive | Container queries | |
| 86 | | Reusable components | Container queries (context-independent) | |
| 87 | |
| 88 | --- |
| 89 | |
| 90 | ## 4. Responsive Design |
| 91 | |
| 92 | ### Breakpoint System |
| 93 | |
| 94 | | Prefix | Min Width | Target | |
| 95 | |--------|-----------|--------| |
| 96 | | (none) | 0px | Mobile-first base | |
| 97 | | `sm:` | 640px | Large phone / small tablet | |
| 98 | | `md:` | 768px | Tablet | |
| 99 | | `lg:` | 1024px | Laptop | |
| 100 | | `xl:` | 1280px | Desktop | |
| 101 | | `2xl:` | 1536px | Large desktop | |
| 102 | |
| 103 | ### Mobile-First Principle |
| 104 | |
| 105 | 1. Write mobile styles first (no prefix) |
| 106 | 2. Add larger screen overrides with prefixes |
| 107 | 3. Example: `w-full md:w-1/2 lg:w-1/3` |
| 108 | |
| 109 | --- |
| 110 | |
| 111 | ## 5. Dark Mode |
| 112 | |
| 113 | ### Configuration Strategies |
| 114 | |
| 115 | | Method | Behavior | Use When | |
| 116 | |--------|----------|----------| |
| 117 | | `class` | `.dark` class toggles | Manual theme switcher | |
| 118 | | `media` | Follows system preference | No user control | |
| 119 | | `selector` | Custom selector (v4) | Complex theming | |
| 120 | |
| 121 | ### Dark Mode Pattern |
| 122 | |
| 123 | | Element | Light | Dark | |
| 124 | |---------|-------|------| |
| 125 | | Background | `bg-white` | `dark:bg-zinc-900` | |
| 126 | | Text | `text-zinc-900` | `dark:text-zinc-100` | |
| 127 | | Borders | `border-zinc-200` | `dark:border-zinc-700` | |
| 128 | |
| 129 | --- |
| 130 | |
| 131 | ## 6. Modern Layout Patterns |
| 132 | |
| 133 | ### Flexbox Patterns |
| 134 | |
| 135 | | Pattern | Classes | |
| 136 | |---------|---------| |
| 137 | | Center (both axes) | `flex items-center justify-center` | |
| 138 | | Vertical stack | `flex flex-col gap-4` | |
| 139 | | Horizontal row | `flex gap-4` | |
| 140 | | Space between | `flex justify-between items-center` | |
| 141 | | Wrap grid | `flex flex-wrap gap-4` | |
| 142 | |
| 143 | ### Grid Patterns |
| 144 | |
| 145 | | Pattern | Classes | |
| 146 | |---------|---------| |
| 147 | | Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` | |
| 148 | | Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans | |
| 149 | | Sidebar layout | `grid grid-cols-[auto_1fr]` | |
| 150 | |
| 151 | > **Note:** Prefer asymmetric/Bento layouts over symmetric 3-column grids. |
| 152 | |
| 153 | --- |
| 154 | |
| 155 | ## 7. Modern Color System |
| 156 | |
| 157 | ### OKLCH vs RGB/HSL |
| 158 | |
| 159 | | Format | Advantage | |
| 160 | |--------|-----------| |
| 161 | | **OKLCH** | Perceptually uniform, better for design | |
| 162 | | **HSL** | Intuitive hue/saturation | |
| 163 | | **RGB** | Legacy compatibility | |
| 164 | |
| 165 | ### Color Token Architecture |
| 166 | |
| 167 | | Layer | Example | Purpose | |
| 168 | |-------|---------|---------| |
| 169 | | **Primitive** | `--blue-500` | Raw color values | |
| 170 | | **Semantic** | `--color-primary` | Purpose-based naming | |
| 171 | | **Component** | `--button-bg` | Component-specific | |
| 172 | |
| 173 | --- |
| 174 | |
| 175 | ## 8. Typography System |
| 176 | |
| 177 | ### Font Stack Pattern |
| 178 | |
| 179 | | Type | Recommended | |
| 180 | |------|-------------| |
| 181 | | Sans | `'Inter', 'SF Pro', system-ui, sans-serif` | |
| 182 | | Mono | `'JetBrains Mono', 'Fira Code', monospace` | |
| 183 | | Display | `'Outfit', 'Poppins', sans-serif` | |
| 184 | |
| 185 | ### Type Scale |
| 186 | |
| 187 | | Class | Size | Use | |
| 188 | |-------|------|-----| |
| 189 | | `text-xs` | 0.75rem | Labels, captions | |
| 190 | | `text-sm` | 0.875rem | Secondary text | |
| 191 | | `text-base` | 1rem | Body text | |
| 192 | | `text-lg` | 1.125rem | Lead text | |
| 193 | | `text-xl`+ | 1.25re |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
