tailwind-css · paulrberg — Claude Code skill: what it does, how to install
Guides coding agents on Tailwind CSS styling, v4 migrations, and class updates while enforcing real build checks and DOM inspection.
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a claude-codeWhat tailwind-css does
This skill binds coding agents to your existing repository conventions. The installed Tailwind version, design tokens, UI components, class-merging utilities, and CSS entrypoints take priority over defaults. The agent will not install packages, alter integrations, or upgrade framework versions unless you explicitly ask for it.
For Tailwind v4 setups, the agent references v4 rules and matching documentation. It strictly forbids applying v4 syntax to older releases. Guides for tailwind-variants, tw-animate-css, or ESLint are only loaded if those tools exist locally or if your prompt introduces them. Classes must remain statically discoverable for the build engine.
Static class review alone is insufficient. If mappings or sources change, the agent runs the real Tailwind build and inspects the rendered DOM across viewport sizes and color themes. It concludes with an inspection status block such as ### 🎨 Tailwind — ✅ styling updated and reports verified visual states.
What it helps with
- update component styling without breaking responsive states or dark mode
- migrate project directives and configuration to Tailwind v4
- organize component variants with tailwind-variants
- verify compiled DOM output through real Tailwind builds
Example prompts for the agent
- Update the product card styling while preserving dark mode behavior.
- Migrate our CSS directives to Tailwind v4 and run the build check.
- Add new button variants using tailwind-variants and inspect the rendered DOM.
How to install tailwind-css
1Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a claude-code2Manually: put the files in place
~/.claude/skills/tailwind-css/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/tailwind-css/
1Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a codex2Manually: put the files in place
.agents/skills/tailwind-css/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a cursor2Manually: put the files in place
.cursor/skills/tailwind-css/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install PaulRBerg/agent-skills tailwind-css2Manually: put the files in place
.github/skills/tailwind-css/SKILL.md1Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a gemini-cli2Platform CLI
gemini skills install https://github.com/PaulRBerg/agent-skills --path skills/tailwind-cssManually: put the files in place
.devin/skills/tailwind-css/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -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 tailwind-css
How do I install tailwind-css in Claude Code?
Run npx skills add PaulRBerg/agent-skills --skill tailwind-css -a claude-code. This command adds the skill to your Claude Code environment.
What does the tailwind-css skill do?
It governs styling workflows for Tailwind CSS: prevents v4 syntax leaks into older setups, preserves local component tokens, and mandates checking the rendered DOM after running a real build.
Can I run tailwind-css via a slash command?
No. The skill specifies user-invocable: false, so it has no standalone slash command. Your agent automatically references its rules whenever you ask for Tailwind edits or upgrades.
Source text
SKILL.md · MIT
--- name: tailwind-css user-invocable: false description: "Use for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css." --- # Tailwind CSS Follow the installed Tailwind version and the repository's tokens, components, class-merging utility, CSS entrypoint, and nearby UI. They take precedence over this skill. Do not add packages, change integration, or migrate versions without a request and local need. ## Routing - Apply [coding preferences](references/coding-preferences.md) only where the project is silent. - For v4 configuration, migration, directives, or generated classes, use [v4 rules](references/tailwind-v4-rules.md) and the matching official docs. - Read [tailwind-variants](references/tailwind-variants.md), [tw-animate-css](references/tw-animate-css.md), or [ESLint](references/eslint.md) only when that integration exists locally or the request adds it. Do not apply v4 syntax to an older installation. Preserve responsive, interaction, accessible, and dark-mode behavior. Do not redesign beyond the request. ## Completion Define the intended visual and state change. Reuse local conventions. Keep classes statically discoverable. If source registration or generated mappings change, run the real Tailwind build and confirm the expected utilities. Run required repository checks and inspect the changed states at one representative viewport for a small style edit. Broaden to narrow/wide viewports, themes, and interactions when responsive rules or shared styling changed. When markup is transformed by JavaScript or a component library, inspect the final DOM too. Textual class review alone is insufficient. Repeat checks only when subsequent edits affect their evidence. Finish with `### 🎨 Tailwind — ✅ styling updated` (or `### 🎨 Tailwind — 🔎 inspected, no files written`) and code-check and rendered-inspection evidence. Use prose for one inspected state and a compact table for several. Add `### ⚠️ Remaining` only when needed. Keep source UI copy and diagnostics undecorated.
© PaulRBerg · MIT · PaulRBerg/agent-skills
Similar skills
Everything for Frontend and UI →tailwind-css by other authors comes first.
