tailwind-patterns — Claude Code skill: Tailwind CSS v4 rules
A Claude skill that hands the agent a rulebook for Tailwind CSS v4: CSS-first config, container queries, token architecture. Useful when you build UI with utilities.
npx claude-code-templates@latest --skill creative-design/tailwind-patternsWhat tailwind-patterns does
The skill spells out how Tailwind v4 works so the agent stops reaching for v3 habits. Configuration lives in CSS now: the @theme directive replaces tailwind.config.js, and every token is exposed as a --* variable. The Oxide compiler is written in Rust, JIT is always on, and CSS nesting is native, so PostCSS is no longer needed for it. @apply still works, but the skill lists heavy use of it as something to avoid.
Container queries get their own section: @container on the parent, @sm:, @md:, @lg: on children, plus named containers like @container/card. Page layouts take viewport breakpoints; reusable components take container queries, because those stay independent of where you drop them. There are tables for dark mode (class, media, selector), flex and grid patterns, the type scale, animations and transitions. Colors are meant to sit in OKLCH and split across three layers: primitive, semantic, component.
A separate table covers anti-patterns. Arbitrary values instead of the scale, !important, inline style=, duplicated class lists, mixing a v3 config with v4 — the skill flags each as a maintenance problem. It is allowed to use Read, Write, Edit, Glob and Grep, so it reads and edits files in your project. Install with npx claude-code-templates@latest --skill creative-design/tailwind-patterns; the skill lands at ~/.claude/skills/tailwind-patterns/SKILL.md.
What it helps with
- move a project from
tailwind.config.jsto@themein CSS - make a component responsive without tying it to viewport width
- split colors into primitive, semantic and component layers
- pick between a breakpoint and a container query
- spot anti-patterns like
!importantand inline styles in markup
Example prompts for the agent
- Rewrite the Tailwind config as
@themein CSS and move colors into semantic tokens - Make this card responsive with
@containerinstead ofmd: - Check this component against Tailwind v4 anti-patterns and tell me what to fix
How to install tailwind-patterns
1claude-code-templates
npx claude-code-templates@latest --skill creative-design/tailwind-patterns2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill tailwind-patterns -a claude-code3Manually: put the files in place
~/.claude/skills/tailwind-patterns/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/tailwind-patterns/
Manually: put the files in place
.agents/skills/tailwind-patterns/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/tailwind-patterns/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates tailwind-patterns2Manually: put the files in place
.github/skills/tailwind-patterns/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/tailwind-patternsManually: put the files in place
.devin/skills/tailwind-patterns/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.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-patterns
How do I install tailwind-patterns in Claude?
Run npx claude-code-templates@latest --skill creative-design/tailwind-patterns. The skill ends up at ~/.claude/skills/tailwind-patterns/SKILL.md.
What does the tailwind-patterns skill do?
It gives the agent rules for Tailwind CSS v4: @theme configuration, container queries, dark mode, grid patterns, the type scale and token architecture. It also lists anti-patterns to avoid.
How is v4 different from v3 here?
Config moves out of tailwind.config.js into the @theme CSS directive, the Oxide compiler replaces the PostCSS plugin, and CSS nesting becomes native. The skill advises against mixing a v3 config with v4.
