{"id":"0a68407d-9932-4abc-b067-dc1aec8625a5","shortId":"dAdACE","kind":"skill","title":"tailwind-patterns","tagline":"Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.","description":"# Tailwind CSS Patterns (v4 - 2025)\n\n> Modern utility-first CSS with CSS-native configuration.\n\n## When to Use\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.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["tailwind","patterns","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-tailwind-patterns","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/tailwind-patterns","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (7,034 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-04-22T06:51:58.186Z","embedding":null,"createdAt":"2026-04-18T21:45:49.253Z","updatedAt":"2026-04-22T06:51:58.186Z","lastSeenAt":"2026-04-22T06:51:58.186Z","tsv":"'-1':358,362 '-105':702 '-150':687 '-200':681 '-4':453,458,475 '-500':554 '/2':359 '/3':363 '0':159,160,167,168 '0.15':152,166 '0.25':174 '0.5':179 '0.7':151 '0.75':611 '0.875':618 '0.98':158 '0px':309 '1':60,337 '1.125':631 '1.25':638 '10':706 '100':417 '1024px':324 '10x':82,817 '11':752 '12':796 '1280px':327 '1536px':330 '1fr':494,515 '1rem':184,625 '2':135,344,505 '200':422 '2025':23 '250':153 '250px':493 '2rem':188 '2xl':329 '3':233,351,501,522,717 '4':299 '5':364 '6':428 '640px':315 '7':525 '700':427 '768px':321 '8':573 '9':641 '900':407,412 'action':211,713 'ad':215 'add':345 'advantag':533 'alongsid':218 'alway':88 'always-on':87 'anim':642,647,651,656,661,667 'animate-bounc':666 'animate-p':655 'animate-puls':660 'animate-spin':650 'anti':754 'anti-pattern':753 'appli':96,741,792 'arbitrari':759 'architectur':18,63,548 'ask':877 'asymmetr':495 'asymmetric/bento':518 'attent':658 'auto':481,490,514 'auto-fit':480,489 'automat':803 'avoid':806 'axe':438 'background':399 'base':75,118,138,313,564,624 'behavior':370 'bento':496 'better':537 'bg':401,405,569 'bg-white':400 'bg-zinc':404 'blue':553 'bodi':626 'border':418,420,425 'border-zinc':419,424 'bounc':668,669 'boundari':885 'breakpoint':238,244,264,285,302 'build':820 'built':645 'built-in':644 'button':568 'button-bg':567 'cach':819,822 'caption':614 'center':436,442,445,467 'chang':65 'children':269 'ci/cd':821 'clarif':879 'class':257,373,375,435,479,605,648,674,715,776,811 'clear':852 'code':595 'col':451,487,500,513 'color':143,148,155,162,527,546,556,560,685 'color-primari':147,559 'color-surfac':154 'color-surface-dark':161 'column':523 'combo':716 'compat':545 'compil':119 'complex':391,721 'compon':287,293,566,571,707,720,725,737,779,795 'component-level':286 'component-specif':570 'concept':103,104 'config':782,839 'configur':11,33,41,109,139,367 'contain':12,54,234,240,248,249,253,259,260,263,271,290,294,833 'container/card':272 'context':297 'context-independ':296 'continu':653 'control':386 'core':102 'criteria':888 'css':5,9,20,28,31,46,74,93,107,111,124,128,137,743,789,828,831 'css-base':73,136 'css-first':8,45,106,788,827 'css-nativ':30,92 'current':71 'custom':388 'dark':164,365,374,393,398,403,413,423 'default':219,222,814 'defin':258 'definit':141 'describ':856 'descript':105 'design':16,50,301,539,726,748,763 'desktop':328,332 'direct':77,97 'discourag':100 'display':597 'document':730 'duplic':774 'durat':680,686 'dynam':738,807 'eas':689,691,695 'ease-in-out':694 'ease-out':690 'effect':649,670,699 'element':251,396,728 'embrac':830 'engin':81,115 'entir':224 'environ':868 'environment-specif':867 'everywher':761 'exampl':352,550 'expert':873 'expos':132 'extend':208,214 'extract':708,711,719,724,729,731,778 'faster':83,121,818 'featur':95,837 'file':840 'fira':594 'first':10,27,47,108,312,335,341,790,829 'fit':482,491 'fix':767 'flex':439,448,450,456,461,470,472 'flex-col':449 'flex-wrap':471 'flexbox':432 'follow':381 'font':191,201,576 'font-mono':200 'font-san':190 'format':532 'full':355 'fulli':786 'gap':452,457,474 'grid':469,476,484,486,497,499,503,510,512,524 'grid-col':485,498,511 'grid-row':502 'head':640 'heavili':793 'horizont':454 'hover':698,700 'hsl':540 'hue/saturation':542 'implement':53,800 'import':766 'independ':298 'inlin':770 'input':882 'inter':193,582 'intuit':541 'item':441,466 'items-cent':440,465 'javascript':113 'jetbrain':203,592 'jit':84 'js':739,746 'justifi':444,463 'justify-between':462 'justify-cent':443 'label':613 'laptop':325 'larg':316,331 'larger':346 'layer':549 'layout':283,430,509,519 'lead':633 'legaci':69,544 'level':282,288 'lg':187,267,323,360,630 'light':397 'limit':844 'list':777 'long':775 'manual':377 'match':853 'md':183,245,266,320,356 'media':380 'method':369,732,733 'migrat':785 'min':305 'minmax':492 'miss':890 'mix':780 'mobil':311,334,339 'mobile-first':310,333 'mode':85,366,394 'modern':14,24,57,429,526 'mono':202,204,591,593 'monospac':205,596 'much':120 'name':146,230,270,565 'nativ':32,86,94,122,237,836 'need':740,747 'nest':123,125 'new':216 'none':308 'note':516 'oklch':150,157,165,529,534 'opac':664 'option':843 'outfit':598 'output':862 'overrid':210,220,348 'oxid':80,114,813 'page':281 'page-level':280 'parent':250,262 'pattern':3,15,21,59,256,395,431,433,434,477,478,578,672,673,755 'perceptu':535 'perform':797 'permiss':883 'phone':317 'ping':657 'plugin':79,90 'poppin':599 'postcss':78,127 'prefer':383,517,794 'prefix':304,343,350 'primari':149,231,561 'primit':552 'principl':7,336,798,799 'pro':584 'project':228 'project-specif':227 'proper':769 'properti':676 'puls':659,662,665 'purg':801 'purpos':551,563 'purpose-bas':562 'queri':13,55,235,254,291,295,834 'raw':555 'react/vue':736 'recommend':580 'rem':175,180,612,619,632,639 'rememb':823 'repeat':488 'replac':221 'requir':881 'respond':242 'respons':289,300,483 'reusabl':292,750 'review':874 'rgb':543 'rgb/hsl':531 'rotat':654 'row':455,504 'rust':117 'rust-bas':116 'safeti':884 'san':192,198,581,589,601 'sans-serif':197,588,600 'scale':170,223,604,701,765 'scenario':278 'scope':855 'screen':347 'secondari':620 'selector':387,389 'semant':145,225,558 'serif':199,590,602 'sf':583 'sidebar':508 'signal':712 'size':606 'skill':39,847 'skill-tailwind-patterns' 'sm':178,265,314,617 'small':318 'source-sickn33' 'space':169,172,177,182,186,459 'spacing-lg':185 'spacing-md':181 'spacing-sm':176 'spacing-x':171 'span':507 'specif':229,274,572,682,768,869 'spin':652 'stack':447,577 'state':722 'static':744 'still':98 'stop':875 'strategi':368 'string':810 'style':340,771 'substitut':865 'subtl':663 'success':887 'surfac':156,163,232 'switcher':379 'symmetr':521 'system':91,195,303,382,528,575,586,727,764 'system-ui':194,585 'tablet':319,322 'tailwind':2,4,19,42,58,61,824 'tailwind-pattern':1 'tailwind.config.js':72 'target':307 'task':851 'templat':809 'test':871 'text':408,410,415,609,616,621,623,627,629,634,636 'text-bas':622 'text-lg':628 'text-sm':615 'text-x':608 'text-xl':635 'text-zinc':409,414 'theme':48,76,140,142,378,392 'time':718 'toggl':376 'token':17,51,131,226,547,749 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':705 'transit':643,671,678,684,704 'transition-al':677 'transition-color':683 'transition-transform':703 'treat':860 'type':241,579,603 'typographi':189,574 'ui':196,587 'uniform':536 'unus':802 'usag':255 'use':36,37,44,144,212,277,279,371,607,734,762,772,791,812,845 'user':385 'util':26,773 'utility-first':25 'v3':67,68,781 'v4':6,22,43,62,70,101,236,390,784,805,816,825 'valid':870 'valu':217,557,751,760 'var':134 'variabl':129,832 'variant':723 'vertic':446 'viewport':246,284 'vs':209,239,530 'w':354,357,361 'w-full':353 'white':402 'width':247,252,306 'without':126 'work':99 'wrap':468,473 'write':338 'xl':326,637 'xs':173,610 'zinc':406,411,416,421,426","prices":[{"id":"0a744205-882b-451c-a939-b973429b2a6e","listingId":"0a68407d-9932-4abc-b067-dc1aec8625a5","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:45:49.253Z"}],"sources":[{"listingId":"0a68407d-9932-4abc-b067-dc1aec8625a5","source":"github","sourceId":"sickn33/antigravity-awesome-skills/tailwind-patterns","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/tailwind-patterns","isPrimary":false,"firstSeenAt":"2026-04-18T21:45:49.253Z","lastSeenAt":"2026-04-22T06:51:58.186Z"}],"details":{"listingId":"0a68407d-9932-4abc-b067-dc1aec8625a5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"tailwind-patterns","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"326e491318efb42ae8c4e8243a813844264c4294","skill_md_path":"skills/tailwind-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/tailwind-patterns"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"tailwind-patterns","description":"Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/tailwind-patterns"},"updatedAt":"2026-04-22T06:51:58.186Z"}}