{"id":"cd6e0209-12a7-479e-82fc-6a7882b0ed30","shortId":"7mpt5x","kind":"skill","title":"tailwind-css","tagline":"This skill should be used when the user asks to style with Tailwind v4, add or fix Tailwind classes, use tailwind-variants or tw-animate-css, or configure Tailwind. Trigger phrases include \"style with Tailwind\", \"fix Tailwind styles\", \"configure Tailwind v4\", \"migrate to Tailwind","description":"# Tailwind CSS v4\n\nExpert guidance for Tailwind CSS v4, CSS-first configuration, modern utility patterns, and type-safe component styling with tailwind-variants.\n\n## CSS-First Configuration\n\nTailwind CSS v4 eliminates `tailwind.config.ts` in favor of CSS-only configuration. All configuration lives in CSS files using special directives.\n\n**Core Directives:**\n\n- `@import \"tailwindcss\"` - Entry point that loads Tailwind\n- `@theme { }` - Define or extend design tokens\n- `@theme static { }` - Define tokens that should not generate utilities\n- `@utility` - Create custom utilities\n- `@custom-variant` - Define custom variants\n\n**Minimal Example:**\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n  --color-brand: oklch(0.72 0.11 178);\n  --font-display: \"Inter\", sans-serif;\n  --spacing-edge: 1.5rem;\n}\n```\n\nAll theme tokens defined with `@theme` automatically become available as utility classes. For example, `--color-brand` can be used as `bg-brand`, `text-brand`, `border-brand`, etc.\n\n## ESLint Integration\n\nUse `eslint-plugin-better-tailwindcss` for Tailwind CSS v4 class validation and style enforcement.\n\n**Correctness Rules (errors):**\n\n- `no-conflicting-classes` - Detect classes that override each other\n- `no-unknown-classes` - Flag classes not registered with Tailwind\n\n**Stylistic Rules (warnings):**\n\n- `enforce-canonical-classes` - Use standard v4 class names\n- `enforce-shorthand-classes` - Use abbreviated class versions\n- `no-deprecated-classes` - Remove outdated class names\n- `no-duplicate-classes` - Eliminate redundant declarations\n- `no-unnecessary-whitespace` - Clean up extra spacing\n\n**Examples:**\n\n```typescript\n// ❌ Bad: separate padding\n<div className=\"px-6 py-6\">\n\n// ✅ Good: shorthand\n<div className=\"p-6\">\n```\n\n```typescript\n// ❌ Bad: separate width/height\n<div className=\"w-6 h-6\">\n\n// ✅ Good: size utility\n<div className=\"size-6\">\n```\n\nRun the project's ESLint check after modifying Tailwind classes to validate all changes across the codebase.\n\n## Coding Preferences\n\nFor detailed coding patterns covering layout, spacing, typography, colors, borders, gradients, arbitrary values, class merging, image sizing, z-index, and dark mode, see [references/coding-preferences.md](references/coding-preferences.md).\n\n## CSS Modules\n\nUse CSS Modules only as a last resort for complex CSS that cannot be easily written with Tailwind classes.\n\nAll `.module.css` files must include `@reference \"#tailwind\";` at the top to enable Tailwind utilities and theme tokens inside the module.\n\n**Example:**\n\n```css\n/* component.module.css */\n@reference \"#tailwind\";\n\n.component {\n  /* Complex CSS that can't be expressed with Tailwind utilities */\n  /* Can still use Tailwind utilities and theme tokens */\n}\n```\n\n## Common Tasks\n\n### Adding a Component with Variants\n\n1. Read `references/tailwind-variants.md` for patterns\n2. Check the project's `@theme` configuration for available tokens\n3. Use `tv()` from `tailwind-variants` for type-safe variants\n\n**Example:**\n\n```typescript\nimport { tv } from \"tailwind-variants\";\n\nconst button = tv({\n  base: \"rounded-lg px-4 py-2 font-medium\",\n  variants: {\n    color: {\n      primary: \"bg-blue-600 text-white\",\n      secondary: \"bg-gray-600 text-white\",\n    },\n    size: {\n      sm: \"text-sm\",\n      md: \"text-base\",\n      lg: \"text-lg\",\n    },\n  },\n});\n```\n\n### Debugging Styles\n\n1. Check `references/tailwind-v4-rules.md` for breaking changes\n2. Verify gradient syntax (`bg-linear-*`, not `bg-gradient-*`)\n3. Verify CSS variable syntax (`bg-my-color`, not `bg-[--var-my-color]`)\n4. Check if arbitrary value exists in the project's `@theme` configuration\n\n### Working with Colors\n\n1. Check the project's `@theme` configuration first to see available colors\n2. Use semantic color names when available\n3. Use opacity modifiers for transparency (`/20`, `/50`, etc.)\n4. Avoid arbitrary colors unless absolutely necessary\n\n**Example:**\n\n```typescript\n// ✅ Good: theme token with opacity\n<div className=\"bg-brand/20 text-brand\">\n\n// ❌ Avoid: arbitrary hex\n<div className=\"bg-[#4f46e5]/20 text-[#4f46e5]\">\n```\n\n### Adding Animations\n\n1. Read `references/tw-animate-css.md` for available animations\n2. Combine a base class (`animate-in` or `animate-out`) with effect classes\n3. Note decimal spacing gotcha: use `[0.625rem]` syntax, not `2.5`\n\n**Example:**\n\n```typescript\n// Enter: fade + slide up\n<div className=\"fade-in slide-in-from-bottom-4 duration-300 animate-in\">\n\n// Exit: fade + slide down\n<div className=\"fade-out slide-out-to-bottom-4 duration-200 animate-out\">\n```\n\n## Quick Reference Table\n\n| Aspect             | Pattern                                           |\n| ------------------ | ------------------------------------------------- |\n| Configuration      | CSS-only: `@theme`, `@utility`, `@custom-variant` |\n| Gradients          | `bg-linear-*`, `bg-radial`, `bg-conic`            |\n| Opacity            | Modifier syntax: `bg-black/50`                    |\n| Line Height        | Modifier syntax: `text-base/7`                    |\n| Font Features      | `font-features-zero`, `font-features-ss01`, etc.  |\n| CSS Variables      | `bg-my-color` (auto-created from `@theme`)        |\n| CSS Modules        | `@reference \"#tailwind\";` at top                  |\n| Class Merging      | `cn()` for conditionals; plain string for static  |\n| Viewport           | `min-h-dvh` (not `min-h-screen`)                  |\n| Component Variants | `references/tailwind-variants.md`                 |\n| Animations         | `references/tw-animate-css.md`                    |\n| V4 Rules           | `references/tailwind-v4-rules.md`                 |\n\n## Reference Documentation\n\n- **Tailwind v4 Rules & Best Practices:** `references/tailwind-v4-rules.md` — Breaking changes, removed/renamed utilities, layout rules, typography, gradients, CSS variables, new v4 features, common pitfalls\n- **tailwind-variants Patterns:** `references/tailwind-variants.md` — Component variants, slots API, composition, TypeScript integration, responsive variants\n- **tw-animate-css Reference:** `references/tw-animate-css.md` — Enter/exit animations, slide/fade/zoom utilities, spacing gotchas","tags":["tailwind","css","agent","skills","paulrberg","agent-skills","ai-agents"],"capabilities":["skill","source-paulrberg","skill-tailwind-css","topic-agent-skills","topic-ai-agents"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/PaulRBerg/agent-skills/tailwind-css","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add PaulRBerg/agent-skills","source_repo":"https://github.com/PaulRBerg/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.478","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 56 github stars · SKILL.md body (6,121 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-18T18:57:37.066Z","embedding":null,"createdAt":"2026-04-18T22:17:48.799Z","updatedAt":"2026-05-18T18:57:37.066Z","lastSeenAt":"2026-05-18T18:57:37.066Z","tsv":"'-2':450 '-4':448 '/20':559 '/50':560,653 '/7':661 '0.11':146 '0.625':608 '0.72':145 '1':405,487,534,581 '1.5':158 '178':147 '2':410,493,546,587 '2.5':612 '3':420,504,553,602 '4':519,562 '600':460,468 'abbrevi':248 'absolut':567 'across':302 'ad':400,579 'add':18 'anim':30,580,586,593,597,712,756,761 'animate-in':592 'animate-out':596 'api':748 'arbitrari':318,522,564,577 'ask':12 'aspect':626 'auto':680 'auto-cr':679 'automat':166 'avail':168,418,544,552,585 'avoid':563,576 'bad':276,282 'base':443,480,590,660 'becom':167 'best':722 'better':197 'bg':182,458,466,498,502,510,514,639,642,645,651,676 'bg-black':650 'bg-blue':457 'bg-brand':181 'bg-conic':644 'bg-gradient':501 'bg-gray':465 'bg-linear':497,638 'bg-my-color':509,675 'bg-radial':641 'black':652 'blue':459 'border':188,316 'border-brand':187 'brand':143,176,183,186,189 'break':491,725 'button':441 'cannot':347 'canon':236 'chang':301,492,726 'check':293,411,488,520,535 'class':22,171,203,214,216,224,226,237,241,246,249,254,257,262,297,320,353,591,601,690 'clean':270 'cn':692 'code':305,309 'codebas':304 'color':142,175,315,455,512,518,533,545,549,565,678 'color-brand':141,174 'combin':588 'common':398,738 'complex':344,380 'compon':70,379,402,709,745 'component.module.css':376 'composit':749 'condit':694 'configur':33,44,62,79,91,93,416,530,540,628 'conflict':213 'conic':646 'const':440 'core':101 'correct':208 'cover':311 'creat':126,681 'css':3,31,51,57,60,77,81,89,96,137,201,333,336,345,375,381,506,630,673,684,733,757 'css-first':59,76 'css-on':88,629 'custom':127,130,133,635 'custom-vari':129,634 'dark':328 'debug':485 'decim':604 'declar':265 'defin':111,118,132,163 'deprec':253 'design':114 'detail':308 'detect':215 'direct':100,102 'display':150 'document':718 'duplic':261 'dvh':703 'easili':349 'edg':157 'effect':600 'elimin':83,263 'enabl':365 'enforc':207,235,244 'enforce-canonical-class':234 'enforce-shorthand-class':243 'enter':615 'enter/exit':760 'entri':105 'error':210 'eslint':191,195,292 'eslint-plugin-better-tailwindcss':194 'etc':190,561,672 'exampl':136,173,274,374,432,569,613 'exist':524 'exit':619 'expert':53 'express':386 'extend':113 'extra':272 'fade':616,620 'favor':86 'featur':663,666,670,737 'file':97,356 'first':61,78,541 'fix':20,41 'flag':225 'font':149,452,662,665,669 'font-display':148 'font-features-ss01':668 'font-features-zero':664 'font-medium':451 'generat':123 'good':279,285,571 'gotcha':606,765 'gradient':317,495,503,637,732 'gray':467 'guidanc':54 'h':702,707 'height':655 'hex':578 'imag':322 'import':103,138,434 'includ':37,358 'index':326 'insid':371 'integr':192,751 'inter':151 'last':341 'layout':312,729 'lg':446,481,484 'line':654 'linear':499,640 'live':94 'load':108 'md':477 'medium':453 'merg':321,691 'migrat':47 'min':701,706 'min-h-dvh':700 'min-h-screen':705 'minim':135 'mode':329 'modern':63 'modifi':295,556,648,656 'modul':334,337,373,685 'module.css':355 'must':357 'name':242,258,550 'necessari':568 'new':735 'no-conflicting-class':211 'no-deprecated-class':251 'no-duplicate-class':259 'no-unknown-class':221 'no-unnecessary-whitespac':266 'note':603 'oklch':144 'opac':555,575,647 'outdat':256 'overrid':218 'pad':278 'pattern':65,310,409,627,743 'phrase':36 'pitfal':739 'plain':695 'plugin':196 'point':106 'practic':723 'prefer':306 'primari':456 'project':290,413,527,537 'px':447 'py':449 'quick':623 'radial':643 'read':406,582 'redund':264 'refer':359,377,624,686,717,758 'references/coding-preferences.md':331,332 'references/tailwind-v4-rules.md':489,716,724 'references/tailwind-variants.md':407,711,744 'references/tw-animate-css.md':583,713,759 'regist':228 'rem':159,609 'remov':255 'removed/renamed':727 'resort':342 'respons':752 'round':445 'rounded-lg':444 'rule':209,232,715,721,730 'run':288 'safe':69,430 'san':153 'sans-serif':152 'screen':708 'secondari':464 'see':330,543 'semant':548 'separ':277,283 'serif':154 'shorthand':245,280 'size':286,323,472 'skill':5 'skill-tailwind-css' 'slide':617,621 'slide/fade/zoom':762 'slot':747 'sm':473,476 'source-paulrberg' 'space':156,273,313,605,764 'spacing-edg':155 'special':99 'ss01':671 'standard':239 'static':117,698 'still':391 'string':696 'style':14,38,43,71,206,486 'stylist':231 'syntax':496,508,610,649,657 'tabl':625 'tailwind':2,16,21,25,34,40,42,45,49,50,56,74,80,109,200,230,296,352,360,366,378,388,393,425,438,687,719,741 'tailwind-css':1 'tailwind-vari':24,73,424,437,740 'tailwind.config.ts':84 'tailwindcss':104,139,198 'task':399 'text':185,462,470,475,479,483,659 'text-bas':478,658 'text-brand':184 'text-lg':482 'text-sm':474 'text-whit':461,469 'theme':110,116,140,161,165,369,396,415,529,539,572,632,683 'token':115,119,162,370,397,419,573 'top':363,689 'topic-agent-skills' 'topic-ai-agents' 'transpar':558 'trigger':35 'tv':422,435,442 'tw':29,755 'tw-animate-css':28,754 'type':68,429 'type-saf':67,428 'typescript':275,281,433,570,614,750 'typographi':314,731 'unknown':223 'unless':566 'unnecessari':268 'use':8,23,98,179,193,238,247,335,392,421,547,554,607 'user':11 'util':64,124,125,128,170,287,367,389,394,633,728,763 'v4':17,46,52,58,82,202,240,714,720,736 'valid':204,299 'valu':319,523 'var':516 'var-my-color':515 'variabl':507,674,734 'variant':26,75,131,134,404,426,431,439,454,636,710,742,746,753 'verifi':494,505 'version':250 'viewport':699 'warn':233 'white':463,471 'whitespac':269 'width/height':284 'work':531 'written':350 'z':325 'z-index':324 'zero':667","prices":[{"id":"9f7f4e07-febb-4abf-929b-232ace5a0cc8","listingId":"cd6e0209-12a7-479e-82fc-6a7882b0ed30","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"PaulRBerg","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:17:48.799Z"}],"sources":[{"listingId":"cd6e0209-12a7-479e-82fc-6a7882b0ed30","source":"github","sourceId":"PaulRBerg/agent-skills/tailwind-css","sourceUrl":"https://github.com/PaulRBerg/agent-skills/tree/main/skills/tailwind-css","isPrimary":false,"firstSeenAt":"2026-04-18T22:17:48.799Z","lastSeenAt":"2026-05-18T18:57:37.066Z"}],"details":{"listingId":"cd6e0209-12a7-479e-82fc-6a7882b0ed30","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"PaulRBerg","slug":"tailwind-css","github":{"repo":"PaulRBerg/agent-skills","stars":56,"topics":["agent-skills","ai-agents"],"license":"mit","html_url":"https://github.com/PaulRBerg/agent-skills","pushed_at":"2026-05-17T10:33:19Z","description":"PRB's collection of agent skills","skill_md_sha":"3a20f1af81dbf015512932291cb35c5c5058d478","skill_md_path":"skills/tailwind-css/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/PaulRBerg/agent-skills/tree/main/skills/tailwind-css"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"tailwind-css","description":"This skill should be used when the user asks to style with Tailwind v4, add or fix Tailwind classes, use tailwind-variants or tw-animate-css, or configure Tailwind. Trigger phrases include \"style with Tailwind\", \"fix Tailwind styles\", \"configure Tailwind v4\", \"migrate to Tailwind v4\"."},"skills_sh_url":"https://skills.sh/PaulRBerg/agent-skills/tailwind-css"},"updatedAt":"2026-05-18T18:57:37.066Z"}}