---
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.