tailwindcss · pedronauck — Claude Code skill: what it does, how to install
Guides coding agents through Tailwind CSS v4 component styling using project tokens, explicit utility classes, and accessible layouts.
npx skills add pedronauck/skills --skill tailwindcss -a claude-codeWhat tailwindcss does
This skill configures the assistant to work with Tailwind CSS v4 component styling. It enforces local project design tokens instead of assuming generic shadcn schemas. The agent inspects code using Read, Grep, and Glob to align with established theme files.
Dynamic class interpolation such as bg-${color}-500 is banned. Because Tailwind relies on static discovery, incomplete class strings break the stylesheet build. The model must use explicit lookup objects, group long utilities cleanly, and handle overrides via the local cn helper.
Specificity issues must be solved without !important. The rules also require preserving visible keyboard focus states and relying on the repository's native validation scripts rather than inventing separate styling checks.
What it helps with
- Style component variants with Tailwind CSS v4 utilities
- Replace interpolated class names with static lookup maps
- Resolve component variant overrides via the project cn helper
- Preserve visible keyboard focus on interactive elements
Example prompts for the agent
- Style this alert component using our Tailwind v4 tokens and the local cn utility.
- Refactor this badge to eliminate interpolated class strings with a lookup table.
- Build a responsive navigation bar while preserving visible keyboard focus rings.
How to install tailwindcss
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a claude-code2Manually: put the files in place
~/.claude/skills/tailwindcss/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/tailwindcss/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a codex2Manually: put the files in place
.agents/skills/tailwindcss/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a cursor2Manually: put the files in place
.cursor/skills/tailwindcss/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills tailwindcss2Manually: put the files in place
.github/skills/tailwindcss/SKILL.md1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a gemini-cli2Platform CLI
gemini skills install https://github.com/pedronauck/skills --path skills/mine/tailwindcssManually: put the files in place
.devin/skills/tailwindcss/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about tailwindcss
How to install tailwindcss in Claude Code?
Run npx skills add pedronauck/skills --skill tailwindcss -a claude-code in your terminal.
What does the tailwindcss skill do?
It directs coding agents to write Tailwind CSS v4 styles using static classes, repository design tokens, and accessible focus rules.
Why does the skill prohibit interpolated classes like bg-${color}-500?
Tailwind requires complete class names during static analysis to generate CSS. Dynamic string fragments cause missing styles, so the skill mandates explicit lookup maps.
Similar skills
Everything for Frontend and UI →tailwindcss by other authors comes first.
