Home › Tailwind CSS › Tailwind CSS .claude/rules file
Tailwind CSS .claude/rules file
A path-scoped Claude Code rules file (.claude/rules) for Tailwind v4 styling in component files.
Claude Code (CLAUDE.md)Tailwind CSS
How to use
Save this as .claude/rules/tailwind.md in your repository root, commit it, and your agent will pick it up automatically. Edit the commands to match your project.
Note: Review and test before use. Provided as is, without warranty. See Terms.
.claude/rules/tailwind.mdDownload ---
paths:
- "**/*.tsx"
- "**/*.jsx"
- "**/*.vue"
- "**/*.svelte"
- "**/*.css"
---
# Styling with Tailwind (v4)
These rules load only when Claude works on component or CSS files.
- Use existing design tokens from the `@theme` block in the global CSS (`bg-primary`, `text-muted-foreground`, `rounded-lg`). Don't introduce raw hex colors or one-off arbitrary values when a token exists; if a new value repeats, add a token.
- Mobile-first: base classes for small screens, then `sm:`/`md:`/`lg:`.
- Interactive elements always have `hover:`, `focus-visible:` and `disabled:` styles. Never remove focus outlines without a visible replacement.
- Merge conditional classes with the project's `cn()` helper; accept and forward `className` on reusable components.
- Variants via `cva` (or the project's variant helper) instead of long ternaries.
- Prefer layout utilities (`flex`, `grid`, `gap-*`) over margins between siblings.
- No `@apply` in component files; keep it for rare base styles in CSS.
- Check contrast for text on colored backgrounds (4.5:1 for body text).
- Dark mode: use the project's `dark:` variant or CSS variable tokens; don't hard-code colors that break in dark mode.
Verify the change visually in the browser at a narrow and a wide viewport.