Tailwind CSS Conventions

tailwindcssfrontendstyling

Consistent Tailwind CSS usage patterns and class organization rules

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown

Содержимое

Order Tailwind classes: layout → sizing → spacing → typography → color → effects → responsive. Extract repeated class combinations into components, not @apply utilities. Use @apply only in global base styles (e.g., typography resets); avoid it in components. Never use inline style attributes when a Tailwind utility class exists. Use semantic color tokens (bg-primary, text-muted) via CSS variables, not raw hex values. Prefer responsive prefixes (md:, lg:) over custom media queries in CSS. Use group and peer modifiers for parent/sibling state-based styling. Avoid arbitrary values ([value]) when a close standard value exists; prefer the standard. Configure custom values in tailwind.config via theme.extend, not one-off arbitrary values. Keep dark mode consistent: use dark: variants everywhere, not mixed approaches. Use gap-* for flex/grid spacing instead of margin between child elements. Do not mix Tailwind with CSS Modules on the same element; pick one per component. Use clsx or cn() helper to compose conditional class names cleanly. Run prettier-plugin-tailwindcss to enforce class order automatically on save.

CLI

npx mindaxis apply tailwind-rules --target cursor --scope project