{"id":"bf160176-0ac1-4100-b56e-830f757273f3","shortId":"tTUeae","kind":"skill","title":"tailwind","tagline":"Use when styling with Tailwind CSS, editing tailwind.config.ts, tailwind.config.js, @tailwind directives, utility classes, responsive layouts, @apply, cn(), @theme config, dark mode, or forms.","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-05-18T19:07:39.890Z","embedding":null,"createdAt":"2026-04-23T13:04:02.127Z","updatedAt":"2026-05-18T19:07:39.890Z","lastSeenAt":"2026-05-18T19:07:39.890Z","tsv":"'-4':169 '/blog/tailwindcss-v4':223 '/cofin/flow/blob/main/templates/styleguides/frameworks/tailwind.md)':259 '/cofin/flow/blob/main/templates/styleguides/general.md)':253 '/components/ui/button':102 '/components/ui/card':113 '/components/ui/input':106 '/docs':217,232 '/docs/installation':220 '/docs/upgrade-guide':226 '/lib/utils':151 '/tailwindlabs/tailwindcss/releases':229 '0.2':47 '0.5':46,52 '240':48 'action':191,194 'add':275,280 'anim':90 'appli':17 'automat':133 'background':69,175 'base':35 'baselin':235 'bg':174 'bg-background':173 'border':71,76,176,178,179 'border-bord':177 'breakpoint':88 'built':93 'built-in':92 'button':100,114,121,207 'card':108,126,189,201 'cardcont':111 'cardhead':109 'cardtitl':110 'case':270 'center':167 'class':14,144 'classnam':154,158,162,180 'cn':18,146,149,163 'color':43,66,142 'color-primari':42 'common':187 'compon':97,157 'config':20,36 'contain':58 'content':128,181,195 'css':7,26,34,37 'css-base':33 'custom':143 'dark':21,130,138,140 'default':124 'design':83 'destruct':120 'detail':273 'direct':12 'disabl':208 'div':161 'duplic':245 'edg':269 'edit':8 'email':185 'first':87 'flex':164 'flexbox':56 'focus':263 'forc':137 'form':24,182 'function':156 'gap':63 'general':249 'generic':240 'ghost':119 'github.com':228,252,258 'github.com/cofin/flow/blob/main/templates/styleguides/frameworks/tailwind.md)':257 'github.com/cofin/flow/blob/main/templates/styleguides/general.md)':251 'github.com/tailwindlabs/tailwindcss/releases':227 'grid':57,197 'guardrail':274,276 'hide/show':89 'import':39,99,103,107,148 'input':104 'instruct':277,282 'integr':272 'interact':79 'interfac':152 'isload':209,210 'item':166,200 'item.id':203 'items-cent':165 'items.map':199 'keep':260 'key':202 'language/framework':241 'larg':125 'layout':16,54 'lg':51,172 'load':204,211 'margin':62 'max/min':75 'mobil':86 'mobile-first':85 'mode':22,131 'offici':213 'oklch':45 'outlin':118 'p':168 'pad':61 'pattern':188 'prefer':136 'primari':44,116 'principl':250 'prop':153,159 'quick':29 'radius':50 'radius-lg':49 'reduc':244 'refer':30,214 'rem':53 'respons':15,82,196 'return':160 'round':171 'rounded-lg':170 'rule':242 'secondari':117 'semant':67 'shadcn':256 'shadcn/ui':96 'shadow':77 'share':233,237 'size':72,122 'skill':28,248,262 'skill-tailwind' 'small':123 'source-cofin' 'space':59 'specif':267 'state':80,205 'string':155 'style':4,183 'styleguid':234,238 'styles.css':38 'submit':186,212 'system':135 'tailwind':1,6,11,25,31,254 'tailwind.config.js':10 'tailwind.config.ts':9 'tailwindcss':40 'tailwindcss.com':216,219,222,225 'tailwindcss.com/blog/tailwindcss-v4':221 'tailwindcss.com/docs':215 'tailwindcss.com/docs/installation':218 'tailwindcss.com/docs/upgrade-guide':224 'text':70 'theme':19,41,141 'titl':127,193 'tool':266 'tool-specif':265 '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':95 'tsx':55,60,65,68,73,78,81,84,91,98,132,147,184,192,198,206 'typographi':64 'ui.shadcn.com':231 'ui.shadcn.com/docs':230 'use':2,139,236 'util':13 'v4':27,32 'valid':279,281 'variant':115 'width/height':74 'workflow':268","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-05-18T19:07:39.890Z"}],"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-27T19:07:26Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"ffebf5a340c2bc25ed9812997c1cacde6de6cacd","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":"Use when styling with Tailwind CSS, editing tailwind.config.ts, tailwind.config.js, @tailwind directives, utility classes, responsive layouts, @apply, cn(), @theme config, dark mode, or forms."},"skills_sh_url":"https://skills.sh/cofin/flow/tailwind"},"updatedAt":"2026-05-18T19:07:39.890Z"}}