Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Tailwind CSS Patterns (v4 - 2025) · coco-research | DecimalAI

coco-research/tailwind-patterns

SkillScore87Maintained

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3.

Frontendby coco-research

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/coco-research-tailwind-patterns/SKILL.md

decimalai skills pull coco-research-tailwind-patterns --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/coco-research-tailwind-patterns/SKILL.md https://app.decimal.ai/s/coco-research-tailwind-patterns/SKILL.md

Raw file: /s/coco-research-tailwind-patterns/SKILL.md ↗ · machine-readable summary at /s/coco-research-tailwind-patterns.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 6d ago

Yes — +9% lift · at higher cost+59% tokens0% turns87% of whole cases pass with skill (20/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-02	✗→✓	▲ Improved	32%	0%
case-03	✗→✓	▲ Improved	25%	0%
case-01	✓→✓	＝ Same ✓	31%	0%
case-05	✓→✓	＝ Same ✓	29%	0%
case-06	✓→✓	＝ Same ✓	40%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

coco-research / coco

skills/tailwind-patterns/SKILL.md

View on GitHub ↗

License NOASSERTIONImported 8/10/2026Version v1

Skill contents

SKILL.md

Tailwind CSS Patterns (v4 - 2025)

Tailwind 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.

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

css
@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)

Breakpoint vs Container

| Type | Responds To | |------|-------------| | Breakpoint (md:) | Viewport width | | Container (@container) | Parent element width |

Container Query Usage

| Pattern | Classes | |---------|---------| | Define container | @container on parent | | Container breakpoint | @sm:, @md:, @lg: on children | | Named containers | @container/card for specificity |

When to Use

| Scenario | Use | |----------|-----| | Page-level layouts | Viewport breakpoints | | Component-level responsive | Container queries | | Reusable components | Container queries (context-independent) |

4. Responsive Design

Breakpoint System

| Prefix | Min Width | Target | |--------|-----------|--------| | (none) | 0px | Mobile-first base | | sm: | 640px | Large phone / small tablet | | md: | 768px | Tablet | | lg: | 1024px | Laptop | | xl: | 1280px | Desktop | | 2xl: | 1536px | Large desktop |

Mobile-First Principle

Write mobile styles first (no prefix)
Add larger screen overrides with prefixes
Example: w-full md:w-1/2 lg:w-1/3

5. Dark Mode

Configuration Strategies

| Method | Behavior | Use When | |--------|----------|----------| | class | .dark class toggles | Manual theme switcher | | media | Follows system preference | No user control | | selector | Custom selector (v4) | Complex theming |

Dark Mode Pattern

| Element | Light | Dark | |---------|-------|------| | Background | bg-white | dark:bg-zinc-900 | | Text | text-zinc-900 | dark:text-zinc-100 | | Borders | border-zinc-200 | dark:border-zinc-700 |

6. Modern Layout Patterns

Flexbox Patterns

| Pattern | Classes | |---------|---------| | Center (both axes) | flex items-center justify-center | | Vertical stack | flex flex-col gap-4 | | Horizontal row | flex gap-4 | | Space between | flex justify-between items-center | | Wrap grid | flex flex-wrap gap-4 |

Grid Patterns

| Pattern | Classes | |---------|---------| | Auto-fit responsive | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] | | Asymmetric (Bento) | grid grid-cols-3 grid-rows-2 with spans | | Sidebar layout | grid grid-cols-[auto_1fr] |

> Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.

7. Modern Color System

OKLCH vs RGB/HSL

| Format | Advantage | |--------|-----------| | OKLCH | Perceptually uniform, better for design | | HSL | Intuitive hue/saturation | | RGB | Legacy compatibility |

Color Token Architecture

| Layer | Example | Purpose | |-------|---------|---------| | Primitive | --blue-500 | Raw color values | | Semantic | --color-primary | Purpose-based naming | | Component | --button-bg | Component-specific |

8. Typography System

Font Stack Pattern

| Type | Recommended | |------|-------------| | Sans | 'Inter', 'SF Pro', system-ui, sans-serif | | Mono | 'JetBrains Mono', 'Fira Code', monospace | | Display | 'Outfit', 'Poppins', sans-serif |

Type Scale

| Class | Size | Use | |-------|------|-----| | text-xs | 0.75rem | Labels, captions | | text-sm | 0.875rem | Secondary text | | text-base | 1rem | Body text | | text-lg | 1.125rem | Lead text | | text-xl+ | 1.25rem+ | Headings |

9. Animation & Transitions

Built-in Animations

| Class | Effect | |-------|--------| | animate-spin | Continuous rotation | | animate-ping | Attention pulse | | animate-pulse | Subtle opacity pulse | | animate-bounce | Bouncing effect |

Transition Patterns

| Pattern | Classes | |---------|---------| | All properties | transition-all duration-200 | | Specific | transition-colors duration-150 | | With easing | ease-out or ease-in-out | | Hover effect | hover:scale-105 transition-transform |

10. Component Extraction

When to Extract

| Signal | Action | |--------|--------| | Same class combo 3+ times | Extract component | | Complex state variants | Extract component | | Design system element | Extract + document |

Extraction Methods

| Method | Use When | |--------|----------| | React/Vue component | Dynamic, JS needed | | @apply in CSS | Static, no JS needed | | Design tokens | Reusable values |

11. Anti-Patterns

| Don't | Do | |-------|-----| | Arbitrary values everywhere | Use design system scale | | !important | Fix specificity properly | | Inline style= | Use utilities | | Duplicate long class lists | Extract component | | Mix v3 config with v4 | Migrate fully to CSS-first | | Use @apply heavily | Prefer components |

12. Performance Principles

| Principle | Implementation | |-----------|----------------| | Purge unused | Automatic in v4 | | Avoid dynamism | No template string classes | | Use Oxide | Default in v4, 10x faster | | Cache builds | CI/CD caching |

> Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.

Want to see if coco-research/tailwind-patterns would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/30/2026, 12:24 UTC · 23 cases

Lift

+9%

87% vs 78%

Agent turns

1.0 vs 1.0

Tokens

+59%

4,159.48 vs 2,614.48

fail → pass · 2pass → pass · 18fail → fail · 3

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I need to build a responsive component grid in HTML using Tailwind classes. Can you provide the HTML markup for a grid container containing interactive product cards, applying proper alignment and gap utilities? Include an explanation comparing viewport-based breakpoints against container query approaches for reusable components so I know which strategy fits this UI.	pass→pass	50,483	33,313	-34%	1	1	0%	5,821	7,634	+31%	0	0	—
case-02 We are converting our UI library cards to support dark mode and subtle hover animations in Tailwind CSS. Please write an example HTML markup snippet for a dark-mode-ready card with transition utilities, along with a bulleted list of anti-patterns to avoid when organizing dynamic classes or custom styles.	fail→pass	21,253	16,424	-23%	1	1	0%	3,199	4,228	+32%	0	0	—
case-03 We are setting up design tokens for our brand colors and spacing scale in a modern CSS setup. Show us how to define a custom primary color using modern CSS color functions and a small spacing scale in CSS rather than a JavaScript configuration file.	fail→pass	15,784	14,243	-10%	1	1	0%	3,096	3,861	+25%	0	0	—
case-04 We need to update our UI card border styles for dark theme toggling. Should we use slate or gray palette tokens for dark theme borders, or is there a preferred standard scale and specific border class pair for light/dark borders? Provide the exact CSS utility classes for light and dark borders.	fail→fail	9,888	9,301	-6%	1	1	0%	2,000	3,680	+84%	0	0	—
case-05 We are designing a modern dashboard feature showcase section. Should we use a uniform symmetric 3-column grid layout across all items, or is an asymmetric layout preferred in modern utility design? Provide the recommended layout structure approach and HTML grid classes.	pass→pass	28,628	13,774	-52%	1	1	0%	3,768	4,842	+29%	0	0	—
case-06 When specifying custom brand colors in modern CSS design tokens, should we express color values in standard HSL, hex codes, or OKLCH, and why? Explain the color representation benefit.	pass→pass	23,137	17,746	-23%	1	1	0%	3,063	4,273	+40%	0	0	—
case-07 We have nested card components inside a multi-column layout where child cards need to trigger responsive layout shifts based on their specific parent wrapper's width, not the root viewport. How do we target specific parent containers using utility classes without relying on JavaScript ResizeObserver?	pass→pass	14,711	19,559	+33%	1	1	0%	2,244	4,674	+108%	0	0	—
case-08 We are structuring a responsive layout for a card list where items span full width on small screens, half width on tablet, and one-third width on desktop. How should responsive utility prefixes be ordered and structured in the markup?	pass→pass	11,619	15,111	+30%	1	1	0%	2,161	4,069	+88%	0	0	—
case-09 Our codebase has recurring utility strings across several HTML files. What is the recommended signal for when to extract recurring utility combinations into reusable components, and which approach is preferred for dynamic elements versus static styles?	pass→pass	16,473	10,448	-37%	1	1	0%	2,615	3,820	+46%	0	0	—
case-10 We are upgrading our build pipeline and evaluating CSS build tools. What engine handles CSS generation in modern v4 setups, and what configuration is needed to enable JIT mode and fast compilation?	pass→pass	14,330	8,418	-41%	1	1	0%	1,963	3,547	+81%	0	0	—
case-11 How should design system token architecture be structured across primitive, semantic, and component layers when mapping base colors like blue-500 to dynamic theme usage?	pass→pass	22,407	17,530	-22%	1	1	0%	3,171	5,483	+73%	0	0	—
case-12 We are setting up body typography and code snippet font stacks in our CSS theme config. What font stacks should be assigned to sans and mono font tokens?	pass→pass	16,844	6,016	-64%	1	1	0%	2,537	3,100	+22%	0	0	—
case-18 Is wrapping extensive class lists in custom CSS rules using `@apply` recommended as a standard architecture in v4 design systems? Explain the modern guidance.	pass→pass	21,103	12,467	-41%	1	1	0%	2,664	4,266	+60%	0	0	—
case-19 In pure vanilla CSS layout specifications (unrelated to utility frameworks), what is the technical difference between CSS Grid `auto-fill` and `auto-fit` when grid items do not fill the entire container width?	pass→pass	16,979	17,074	+1%	1	1	0%	2,317	4,215	+82%	0	0	—
case-20 We are writing a custom Node.js script using PostCSS API directly to parse a CSS AST and transform all hex colors into CSS `hsl()` syntax. How do you traverse decl nodes using `postcss.plugin` or `Root.walkDecls` in PostCSS 8?	fail→fail	21,049	19,203	-9%	1	1	0%	3,532	4,862	+38%	0	0	—
case-21 How does Meta's StyleX compiler transform CSS-in-JS object definitions into atomic CSS classes at build time, and how does it guarantee deterministic class precedence?	pass→pass	32,203	20,355	-37%	1	1	0%	3,779	5,536	+46%	0	0	—
case-13 We want a card grid that automatically fits as many 250px-minimum cards into a row as possible without writing explicit breakpoint prefixes (`sm:`, `md:`, `lg:`). Show the utility class syntax for this fluid grid.	pass→pass	9,617	5,716	-41%	1	1	0%	835	2,886	+246%	0	0	—
case-14 What utility classes should be applied to an element to trigger a subtle smooth scale elevation effect on hover without animating unrelated layout properties?	fail→fail	15,593	14,727	-6%	1	1	0%	2,234	3,767	+69%	0	0	—
case-15 We need standard utility classes for a loading spinner icon and a subtle background loading skeleton. Which built-in animation classes should be applied to each?	pass→pass	6,473	11,454	+77%	1	1	0%	1,218	3,018	+148%	0	0	—
case-16 What grid utility class configuration creates a two-column sidebar layout where the sidebar auto-sizes to its content width and the main area fills the remaining space?	pass→pass	8,281	8,013	-3%	1	1	0%	1,273	2,592	+104%	0	0	—
case-17 A developer on our team is writing code like `class="text-" + color + "-500"` to dynamically pick text colors in React. Why does this cause issues in production builds, and what is the proper utility approach?	pass→pass	14,172	18,966	+34%	1	1	0%	2,107	4,266	+102%	0	0	—
case-22 We are setting up typography styles for secondary helper text and lead text. What utility classes should be used for 0.875rem secondary text and 1.125rem lead text according to standard design scales?	pass→pass	9,425	3,365	-64%	1	1	0%	1,785	2,503	+40%	0	0	—
case-23 We are migrating a legacy project to modern CSS-first styling. How are theme extensions handled compared to full scale overrides when configuring values in CSS?	pass→pass	25,138	13,459	-46%	1	1	0%	2,751	4,546	+65%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 23 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 78.3%
Pass rate with the skill: 87%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/30/2026, 12:24 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-02

Prompt

We are converting our UI library cards to support dark mode and subtle hover animations in Tailwind CSS. Please write an example HTML markup snippet for a dark-mode-ready card with transition utilities, along with a bulleted list of anti-patterns to avoid when organizing dynamic classes or custom styles.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run87

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+63% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 5 days ago

Other measured skills in the registry, with their headline benchmark lift.