{"id":"bf160176-0ac1-4100-b56e-830f757273f3","shortId":"tTUeae","kind":"skill","title":"tailwind","tagline":"Auto-activate for tailwind.config.ts, tailwind.config.js, @tailwind directives. Tailwind CSS v4: utility classes, responsive design, @apply, cn(), @theme config. Use when: styling with Tailwind, writing utility classes, configuring Tailwind v4, or building responsive layouts with","description":"# Tailwind CSS v4 Skill\n\n<workflow>\n\n## Quick Reference\n\n### Tailwind v4 CSS-Based Config\n\n<example>\n\n```css\n/* styles.css */\n@import \"tailwindcss\";\n\n@theme {\n  --color-primary: oklch(0.5 0.2 240);\n  --radius-lg: 0.5rem;\n}\n```\n\n</example>\n\n### Layout\n\n<example>\n\n```tsx\n// Flexbox\n<div className=\"flex items-center justify-between gap-4\">\n\n// Grid\n<div className=\"grid grid-cols-3 gap-4\">\n\n// Container\n<div className=\"container mx-auto px-4\">\n```\n\n</example>\n\n### Spacing\n\n<example>\n\n```tsx\n// Padding\n<div className=\"p-4 px-6 py-2\">\n\n// Margin\n<div className=\"m-4 mx-auto my-2\">\n\n// Gap\n<div className=\"gap-4 gap-x-2 gap-y-4\">\n```\n\n</example>\n\n### Typography\n\n<example>\n\n```tsx\n<h1 className=\"text-4xl font-bold tracking-tight\">\n<p className=\"text-muted-foreground text-sm\">\n<span className=\"font-medium\">\n```\n\n</example>\n\n### Colors (Semantic)\n\n<example>\n\n```tsx\n// Background\n<div className=\"bg-background bg-primary bg-muted\">\n\n// Text\n<span className=\"text-foreground text-primary text-muted-foreground\">\n\n// Border\n<div className=\"border border-border border-primary\">\n```\n\n</example>\n\n### Sizing\n\n<example>\n\n```tsx\n// Width/Height\n<div className=\"w-full h-screen w-64 h-12\">\n\n// Max/Min\n<div className=\"max-w-md min-h-screen\">\n```\n\n</example>\n\n### Borders & Shadows\n\n<example>\n\n```tsx\n<div className=\"rounded-lg border border-border shadow-sm\">\n<div className=\"rounded-full\">\n```\n\n</example>\n\n### Interactive States\n\n<example>\n\n```tsx\n<button className=\"hover:bg-primary/90 focus:ring-2 focus:ring-primary disabled:opacity-50\">\n<a className=\"hover:underline\">\n```\n\n</example>\n\n### Responsive Design\n\n<example>\n\n```tsx\n// Mobile-first breakpoints\n<div className=\"w-full md:w-1/2 lg:w-1/3\">\n\n// Hide/show\n<div className=\"hidden md:block\">\n<div className=\"block md:hidden\">\n```\n\n</example>\n\n### Animation\n\n<example>\n\n```tsx\n// Built-in\n<div className=\"animate-spin animate-pulse animate-bounce\">\n\n// Transitions\n<div className=\"transition-colors duration-200 ease-in-out\">\n```\n\n</example>\n\n## Shadcn/ui Components\n\n<example>\n\n```tsx\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Card, CardHeader, CardTitle, CardContent } from \"@/components/ui/card\"\n\n// Button variants\n<Button variant=\"default\">Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"outline\">Outline</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"destructive\">Destructive</Button>\n\n// Button sizes\n<Button size=\"sm\">Small</Button>\n<Button size=\"default\">Default</Button>\n<Button size=\"lg\">Large</Button>\n\n// Card\n<Card>\n  <CardHeader>\n    <CardTitle>Title</CardTitle>\n  </CardHeader>\n  <CardContent>\n    Content here\n  </CardContent>\n</Card>\n```\n\n</example>\n\n## Dark Mode\n\n<example>\n\n```tsx\n// Automatic with system preference\n<div className=\"bg-background text-foreground\">\n\n// Force dark\n<div className=\"dark\">\n  <div className=\"bg-background\"> {/* Uses dark theme colors */}\n```\n\n</example>\n\n## Custom Classes with cn()\n\n<example>\n\n```tsx\nimport { cn } from \"@/lib/utils\"\n\ninterface Props {\n  className?: string\n}\n\nfunction Component({ className }: Props) {\n  return (\n    <div className={cn(\n      \"flex items-center p-4 rounded-lg\",\n      \"bg-background border border-border\",\n      className\n    )}>\n      Content\n    </div>\n  )\n}\n```\n\n</example>\n\n## Form Styling\n\n<example>\n\n```tsx\n<form className=\"space-y-4\">\n  <div className=\"space-y-2\">\n    <label className=\"text-sm font-medium\">Email</label>\n    <Input type=\"email\" placeholder=\"email@example.com\" />\n  </div>\n  <Button type=\"submit\" className=\"w-full\">\n    Submit\n  </Button>\n</form>\n```\n\n</example>\n\n## Common Patterns\n\n### Card with Actions\n\n<example>\n\n```tsx\n<Card>\n  <CardHeader className=\"flex flex-row items-center justify-between\">\n    <CardTitle>Title</CardTitle>\n    <Button variant=\"ghost\" size=\"sm\">Action</Button>\n  </CardHeader>\n  <CardContent className=\"space-y-4\">\n    {/* Content */}\n  </CardContent>\n</Card>\n```\n\n</example>\n\n### Responsive Grid\n\n<example>\n\n```tsx\n<div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n  {items.map(item => (\n    <Card key={item.id}>...</Card>\n  ))}\n</div>\n```\n\n</example>\n\n### Loading State\n\n<example>\n\n```tsx\n<Button disabled={isLoading}>\n  {isLoading ? (\n    <>\n      <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n      Loading...\n    </>\n  ) : (\n    'Submit'\n  )}\n</Button>\n```\n\n</example>\n\n</workflow>\n\n## Official References\n\n- <https://tailwindcss.com/docs>\n- <https://tailwindcss.com/docs/installation>\n- <https://tailwindcss.com/blog/tailwindcss-v4>\n- <https://tailwindcss.com/docs/upgrade-guide>\n- <https://github.com/tailwindlabs/tailwindcss/releases>\n- <https://ui.shadcn.com/docs>\n\n## Shared Styleguide Baseline\n\n- Use shared styleguides for generic language/framework rules to reduce duplication in this skill.\n- [General Principles](https://github.com/cofin/flow/blob/main/templates/styleguides/general.md)\n- [Tailwind and Shadcn](https://github.com/cofin/flow/blob/main/templates/styleguides/frameworks/tailwind.md)\n- Keep this skill focused on tool-specific workflows, edge cases, and integration details.\n\n<guardrails>\n## Guardrails\n\nAdd guardrails instructions here.\n</guardrails>\n\n<validation>\n## Validation\n\nAdd validation instructions here.\n</validation>","tags":["tailwind","flow","cofin","agent-skills","ai-agents","beads","claude-code","codex","cursor","developer-tools","gemini-cli","opencode"],"capabilities":["skill","source-cofin","skill-tailwind","topic-agent-skills","topic-ai-agents","topic-beads","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-opencode","topic-plugin","topic-slash-commands","topic-spec-driven-development"],"categories":["flow"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cofin/flow/tailwind","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cofin/flow","source_repo":"https://github.com/cofin/flow","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (5,284 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-24T07:03:20.448Z","embedding":null,"createdAt":"2026-04-23T13:04:02.127Z","updatedAt":"2026-04-24T07:03:20.448Z","lastSeenAt":"2026-04-24T07:03:20.448Z","tsv":"'-4':181 '/blog/tailwindcss-v4':235 '/cofin/flow/blob/main/templates/styleguides/frameworks/tailwind.md)':271 '/cofin/flow/blob/main/templates/styleguides/general.md)':265 '/components/ui/button':114 '/components/ui/card':125 '/components/ui/input':118 '/docs':229,244 '/docs/installation':232 '/docs/upgrade-guide':238 '/lib/utils':163 '/tailwindlabs/tailwindcss/releases':241 '0.2':59 '0.5':58,64 '240':60 'action':203,206 'activ':4 'add':287,292 'anim':102 'appli':17 'auto':3 'auto-activ':2 'automat':145 'background':81,187 'base':47 'baselin':247 'bg':186 'bg-background':185 'border':83,88,188,190,191 'border-bord':189 'breakpoint':100 'build':33 'built':105 'built-in':104 'button':112,126,133,219 'card':120,138,201,213 'cardcont':123 'cardhead':121 'cardtitl':122 'case':282 'center':179 'class':14,28,156 'classnam':166,170,174,192 'cn':18,158,161,175 'color':55,78,154 'color-primari':54 'common':199 'compon':109,169 'config':20,48 'configur':29 'contain':70 'content':140,193,207 'css':11,38,46,49 'css-base':45 'custom':155 'dark':142,150,152 'default':136 'design':16,95 'destruct':132 'detail':285 'direct':9 'disabl':220 'div':173 'duplic':257 'edg':281 'email':197 'first':99 'flex':176 'flexbox':68 'focus':275 'forc':149 'form':194 'function':168 'gap':75 'general':261 'generic':252 'ghost':131 'github.com':240,264,270 'github.com/cofin/flow/blob/main/templates/styleguides/frameworks/tailwind.md)':269 'github.com/cofin/flow/blob/main/templates/styleguides/general.md)':263 'github.com/tailwindlabs/tailwindcss/releases':239 'grid':69,209 'guardrail':286,288 'hide/show':101 'import':51,111,115,119,160 'input':116 'instruct':289,294 'integr':284 'interact':91 'interfac':164 'isload':221,222 'item':178,212 'item.id':215 'items-cent':177 'items.map':211 'keep':272 'key':214 'language/framework':253 'larg':137 'layout':35,66 'lg':63,184 'load':216,223 'margin':74 'max/min':87 'mobil':98 'mobile-first':97 'mode':143 'offici':225 'oklch':57 'outlin':130 'p':180 'pad':73 'pattern':200 'prefer':148 'primari':56,128 'principl':262 'prop':165,171 'quick':41 'radius':62 'radius-lg':61 'reduc':256 'refer':42,226 'rem':65 'respons':15,34,94,208 'return':172 'round':183 'rounded-lg':182 'rule':254 'secondari':129 'semant':79 'shadcn':268 'shadcn/ui':108 'shadow':89 'share':245,249 'size':84,134 'skill':40,260,274 'skill-tailwind' 'small':135 'source-cofin' 'space':71 'specif':279 'state':92,217 'string':167 'style':23,195 'styleguid':246,250 'styles.css':50 'submit':198,224 'system':147 'tailwind':1,8,10,25,30,37,43,266 'tailwind.config.js':7 'tailwind.config.ts':6 'tailwindcss':52 'tailwindcss.com':228,231,234,237 'tailwindcss.com/blog/tailwindcss-v4':233 'tailwindcss.com/docs':227 'tailwindcss.com/docs/installation':230 'tailwindcss.com/docs/upgrade-guide':236 'text':82 'theme':19,53,153 'titl':139,205 'tool':278 'tool-specif':277 'topic-agent-skills' 'topic-ai-agents' 'topic-beads' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-opencode' 'topic-plugin' 'topic-slash-commands' 'topic-spec-driven-development' 'transit':107 'tsx':67,72,77,80,85,90,93,96,103,110,144,159,196,204,210,218 'typographi':76 'ui.shadcn.com':243 'ui.shadcn.com/docs':242 'use':21,151,248 'util':13,27 'v4':12,31,39,44 'valid':291,293 'variant':127 'width/height':86 'workflow':280 'write':26","prices":[{"id":"89c788fe-b03e-4d1c-a763-ed52761e5fcb","listingId":"bf160176-0ac1-4100-b56e-830f757273f3","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cofin","category":"flow","install_from":"skills.sh"},"createdAt":"2026-04-23T13:04:02.127Z"}],"sources":[{"listingId":"bf160176-0ac1-4100-b56e-830f757273f3","source":"github","sourceId":"cofin/flow/tailwind","sourceUrl":"https://github.com/cofin/flow/tree/main/skills/tailwind","isPrimary":false,"firstSeenAt":"2026-04-23T13:04:02.127Z","lastSeenAt":"2026-04-24T07:03:20.448Z"}],"details":{"listingId":"bf160176-0ac1-4100-b56e-830f757273f3","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cofin","slug":"tailwind","github":{"repo":"cofin/flow","stars":11,"topics":["agent-skills","ai-agents","beads","claude-code","codex","context-driven-development","cursor","developer-tools","gemini-cli","opencode","plugin","slash-commands","spec-driven-development","subagents","tdd","workflow"],"license":"apache-2.0","html_url":"https://github.com/cofin/flow","pushed_at":"2026-04-19T23:22:27Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"e7deb51fc06e9648d6195bfe4d850f9d6123f15d","skill_md_path":"skills/tailwind/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cofin/flow/tree/main/skills/tailwind"},"layout":"multi","source":"github","category":"flow","frontmatter":{"name":"tailwind","description":"Auto-activate for tailwind.config.ts, tailwind.config.js, @tailwind directives. Tailwind CSS v4: utility classes, responsive design, @apply, cn(), @theme config. Use when: styling with Tailwind, writing utility classes, configuring Tailwind v4, or building responsive layouts with Shadcn/ui. Not for Bootstrap, plain CSS, or CSS-in-JS solutions."},"skills_sh_url":"https://skills.sh/cofin/flow/tailwind"},"updatedAt":"2026-04-24T07:03:20.448Z"}}