Tailwind CSS Architecture
Cursor.cursorrulesCoding
Opinionated Tailwind CSS rules: utility-first, design tokens, responsive patterns, and dark mode.
Get this skill
Add the skill file with the CLI, by hand, or over MCP.Save this to your project or home directory so Cursor can load it.
npx goodprompts add tailwind-css-architectureSaves to
./.cursorrulesnpx goodprompts add tailwind-css-architectureSaves to
./.cursorrulesSkill file
.cursorrules1,518 characters# Tailwind CSS Architecture
## Core Principles
- Utility-first: compose styles from utilities. Extract components, not CSS classes.
- Never use `@apply` in component files. Only use it in global CSS for base resets.
- Use CSS variables for design tokens, not hardcoded values.
- Prefer Tailwind's built-in spacing/color scales over arbitrary values.
## Class Ordering
Follow this order in className strings:
1. Layout (display, position, overflow)
2. Sizing (width, height, min/max)
3. Spacing (margin, padding, gap)
4. Typography (font, text, leading)
5. Visual (bg, border, shadow, rounded)
6. Interactive (cursor, hover, focus)
7. Animation (transition, animate)
## Responsive Design
- Mobile-first: base styles are mobile, layer up with `sm:`, `md:`, `lg:`.
- Use `container mx-auto px-4` for page-level containment.
- Use CSS Grid (`grid`) for page layouts, Flexbox (`flex`) for component layouts.
- Define breakpoints once in config, don't use arbitrary breakpoints.
## Dark Mode
- Use `dark:` variant with class strategy.
- Semantic color tokens: `text-foreground`, `bg-background`, `border-border`.
- Never hardcode colors like `text-gray-900 dark:text-white`. Use tokens.
- Test both modes for every component.
## Component Patterns
- Use `cn()` (clsx + tailwind-merge) for conditional class merging.
- Variant props via `cva()` for multi-variant components.
- Avoid deep nesting of Tailwind classes with string interpolation.
- Prefer `group` and `peer` modifiers over JavaScript for hover/focus states.