{"id":"873f75d4-5225-464f-ab7f-82db9d68b759","shortId":"wWX2KK","kind":"skill","title":"tailwind-patterns","tagline":"Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3.","description":"# Tailwind CSS Patterns (v4 - 2025)\n\nTailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind CSS v4, migrating from v3, configuring design tokens in CSS, implementing responsive layouts, or applying utility-first 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```css\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.","tags":["tailwind","patterns","coco","rkz91","agent-skills","agents-md","ai-agents","claude-code","codex","cursor","developer-tools","llm-tools"],"capabilities":["skill","source-rkz91","skill-tailwind-patterns","topic-agent-skills","topic-agents-md","topic-ai-agents","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-llm-tools","topic-mcp","topic-pm-tools","topic-product-management","topic-productivity"],"categories":["coco"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/rkz91/coco/tailwind-patterns","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add rkz91/coco","source_repo":"https://github.com/rkz91/coco","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (6,772 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:14:09.418Z","embedding":null,"createdAt":"2026-05-18T13:21:42.804Z","updatedAt":"2026-05-18T19:14:09.418Z","lastSeenAt":"2026-05-18T19:14:09.418Z","tsv":"'-1':372,376 '-105':716 '-150':701 '-200':695 '-4':467,472,489 '-500':568 '/2':373 '/3':377 '0':173,174,181,182 '0.15':166,180 '0.25':188 '0.5':193 '0.7':165 '0.75':625 '0.875':632 '0.98':172 '0px':323 '1':73,351 '1.125':645 '1.25':652 '10':720 '100':431 '1024px':338 '10x':95,831 '11':766 '12':810 '1280px':341 '1536px':344 '1fr':508,529 '1rem':198,639 '2':148,358,519 '200':436 '2025':33 '250':167 '250px':507 '2rem':202 '2xl':343 '3':247,365,515,536,731 '4':313 '5':378 '6':442 '640px':329 '7':539 '700':441 '768px':335 '8':587 '9':655 '900':421,426 'action':225,727 'ad':229 'add':359 'advantag':547 'alongsid':232 'alway':101 'always-on':100 'anim':656,661,665,670,675,681 'animate-bounc':680 'animate-p':669 'animate-puls':674 'animate-spin':664 'anti':768 'anti-pattern':767 'appli':68,109,755,806 'arbitrari':773 'architectur':18,48,76,562 'asymmetr':509 'asymmetric/bento':532 'attent':672 'auto':495,504,528 'auto-fit':494,503 'automat':817 'avoid':820 'axe':452 'background':413 'base':88,131,151,327,578,638 'behavior':384 'bento':510 'better':551 'bg':415,419,583 'bg-white':414 'bg-zinc':418 'blue':567 'bodi':640 'border':432,434,439 'border-zinc':433,438 'bounc':682,683 'breakpoint':252,258,278,299,316 'build':21,51,834 'built':659 'built-in':658 'button':582 'button-bg':581 'cach':833,836 'caption':628 'center':450,456,459,481 'chang':78 'children':283 'ci/cd':835 'class':271,387,389,449,493,619,662,688,729,790,825 'code':609 'col':465,501,514,527 'color':157,162,169,176,541,560,570,574,699 'color-primari':161,573 'color-surfac':168 'color-surface-dark':175 'column':537 'combo':730 'compat':559 'compil':132 'complex':405,735 'compon':301,307,580,585,721,734,739,751,793,809 'component-level':300 'component-specif':584 'concept':116,117 'config':796,853 'configur':11,41,59,122,152,381 'contain':12,42,248,254,262,263,267,273,274,277,285,304,308,847 'container/card':286 'context':311 'context-independ':310 'continu':667 'control':400 'core':115 'css':5,9,30,35,39,54,63,87,106,120,124,137,141,150,155,757,803,842,845 'css-base':86,149 'css-first':8,38,119,802,841 'css-nativ':105 'current':84 'custom':402 'dark':178,379,388,407,412,417,427,437 'default':233,236,828 'defin':272 'definit':154 'descript':118 'design':16,46,60,315,553,740,762,777 'desktop':342,346 'direct':90,110 'discourag':113 'display':611 'document':744 'duplic':788 'durat':694,700 'dynam':752,821 'eas':703,705,709 'ease-in-out':708 'ease-out':704 'effect':663,684,713 'element':265,410,742 'embrac':844 'engin':94,128 'entir':238 'everywher':775 'exampl':366,564 'expos':145 'extend':222,228 'extract':722,725,733,738,743,745,792 'faster':96,134,832 'featur':108,851 'file':854 'fira':608 'first':10,40,71,121,326,349,355,804,843 'fit':496,505 'fix':781 'flex':453,462,464,470,475,484,486 'flex-col':463 'flex-wrap':485 'flexbox':446 'follow':395 'font':205,215,590 'font-mono':214 'font-san':204 'format':546 'full':369 'fulli':800 'gap':466,471,488 'grid':483,490,498,500,511,513,517,524,526,538 'grid-col':499,512,525 'grid-row':516 'head':654 'heavili':807 'horizont':468 'hover':712,714 'hsl':554 'hue/saturation':556 'implement':64,814 'import':780 'independ':312 'inlin':784 'inter':207,596 'intuit':555 'item':455,480 'items-cent':454,479 'javascript':126 'jetbrain':217,606 'jit':97 'js':753,760 'justifi':458,477 'justify-between':476 'justify-cent':457 'label':627 'laptop':339 'larg':330,345 'larger':360 'layer':563 'layout':66,297,444,523,533 'lead':647 'legaci':82,558 'level':296,302 'lg':201,281,337,374,644 'light':411 'list':791 'long':789 'manual':391 'md':197,259,280,334,370 'media':394 'method':383,746,747 'migrat':26,56,799 'min':319 'minmax':506 'mix':794 'mobil':325,348,353 'mobile-first':324,347 'mode':98,380,408 'modern':14,44,443,540 'mono':216,218,605,607 'monospac':219,610 'much':133 'name':160,244,284,579 'nativ':99,107,135,251,850 'need':754,761 'nest':136,138 'new':230 'none':322 'note':530 'oklch':164,171,179,543,548 'opac':678 'option':857 'outfit':612 'overrid':224,234,362 'oxid':93,127,827 'page':295 'page-level':294 'parent':264,276 'pattern':3,15,31,45,72,270,409,445,447,448,491,492,592,686,687,769 'perceptu':549 'perform':811 'phone':331 'ping':671 'plugin':92,103 'poppin':613 'postcss':91,140 'prefer':397,531,808 'prefix':318,357,364 'primari':163,245,575 'primit':566 'principl':7,37,350,812,813 'pro':598 'project':242 'project-specif':241 'proper':783 'properti':690 'puls':673,676,679 'purg':815 'purpos':565,577 'purpose-bas':576 'queri':13,43,249,268,305,309,848 'raw':569 'react/vue':750 'recommend':594 'rem':189,194,626,633,646,653 'rememb':837 'repeat':502 'replac':235 'respond':256 'respons':65,303,314,497 'reusabl':306,764 'rgb':557 'rgb/hsl':545 'rotat':668 'row':469,518 'rust':130 'rust-bas':129 'san':206,212,595,603,615 'sans-serif':211,602,614 'scale':184,237,618,715,779 'scenario':292 'screen':361 'secondari':634 'selector':401,403 'semant':159,239,572 'serif':213,604,616 'sf':597 'sidebar':522 'signal':726 'size':620 'skill' 'skill-tailwind-patterns' 'sm':192,279,328,631 'small':332 'source-rkz91' 'space':183,186,191,196,200,473 'spacing-lg':199 'spacing-md':195 'spacing-sm':190 'spacing-x':185 'span':521 'specif':243,288,586,696,782 'spin':666 'stack':461,591 'state':736 'static':758 'still':111 'strategi':382 'string':824 'style':354,785 'subtl':677 'surfac':170,177,246 'switcher':393 'symmetr':535 'system':104,209,317,396,542,589,600,741,778 'system-ui':208,599 'tablet':333,336 'tailwind':2,4,23,29,34,53,74,838 'tailwind-pattern':1 'tailwind.config.js':85 'target':321 'templat':823 'text':422,424,429,623,630,635,637,641,643,648,650 'text-bas':636 'text-lg':642 'text-sm':629 'text-x':622 'text-xl':649 'text-zinc':423,428 'theme':89,153,156,392,406 'time':732 'toggl':390 'token':17,47,61,144,240,561,763 'topic-agent-skills' 'topic-agents-md' 'topic-ai-agents' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-llm-tools' 'topic-mcp' 'topic-pm-tools' 'topic-product-management' 'topic-productivity' 'transform':719 'transit':657,685,692,698,718 'transition-al':691 'transition-color':697 'transition-transform':717 'type':255,593,617 'typographi':203,588 'ui':210,601 'uniform':550 'unus':816 'usag':269 'use':19,49,158,226,291,293,385,621,748,776,786,805,826 'user':399 'util':70,787 'utility-first':69 'v3':28,58,80,81,795 'v4':6,24,32,36,55,75,83,114,250,404,798,819,830,839 'valu':231,571,765,774 'var':147 'variabl':142,846 'variant':737 'vertic':460 'viewport':260,298 'vs':223,253,544 'w':368,371,375 'w-full':367 'white':416 'width':261,266,320 'without':139 'work':112 'wrap':482,487 'write':352 'xl':340,651 'xs':187,624 'zinc':420,425,430,435,440","prices":[{"id":"24fba624-3740-4605-8665-17c8e53e7110","listingId":"873f75d4-5225-464f-ab7f-82db9d68b759","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"rkz91","category":"coco","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:42.804Z"}],"sources":[{"listingId":"873f75d4-5225-464f-ab7f-82db9d68b759","source":"github","sourceId":"rkz91/coco/tailwind-patterns","sourceUrl":"https://github.com/rkz91/coco/tree/main/skills/tailwind-patterns","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:42.804Z","lastSeenAt":"2026-05-18T19:14:09.418Z"}],"details":{"listingId":"873f75d4-5225-464f-ab7f-82db9d68b759","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"rkz91","slug":"tailwind-patterns","github":{"repo":"rkz91/coco","stars":7,"topics":["agent-skills","agents-md","ai","ai-agents","claude-code","codex","cursor","developer-tools","llm-tools","mcp","pm-tools","product-management","productivity","prompt-engineering","workflow-automation"],"license":"mit","html_url":"https://github.com/rkz91/coco","pushed_at":"2026-04-26T01:51:27Z","description":"Open-source library of AI superpowers — 59 skills, 34 commands, 10 agents + 24 GSD subagents, 3 system bundles. An entire team, wherever your AI lives. Vendor-neutral across Claude Code, Cursor, Codex, and any AGENTS.md tool.","skill_md_sha":"fd441f897c83df9540fd4053d080b0aabe7ea394","skill_md_path":"skills/tailwind-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/rkz91/coco/tree/main/skills/tailwind-patterns"},"layout":"multi","source":"github","category":"coco","frontmatter":{"name":"tailwind-patterns","description":"Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3."},"skills_sh_url":"https://skills.sh/rkz91/coco/tailwind-patterns"},"updatedAt":"2026-05-18T19:14:09.418Z"}}