Production-Ready Rule
•
**/*.{tsx,jsx,vue,svelte,html,css}
Tailwind CSS v4 & Modern Utility Styling .cursorrules (.mdc)
High-velocity .cursorrules and .cursor/rules/*.mdc configuration for Tailwind CSS v4. Enforce cn() utility merging, mobile-first responsiveness, and prevent arbitrary class sprawl.
.cursor/rules/tailwind-css.mdc
---
description: Tailwind CSS v4 utility styling, cn() merging, and responsive design standards
globs: **/*.{tsx,jsx,vue,svelte,html,css}
alwaysApply: false
---
# Tailwind CSS v4 Standards
## Utility-First Discipline
- Use atomic utility classes directly. Do not create separate CSS files with `@apply` unless writing base typography.
- Always use the `cn()` helper (`clsx` + `tailwind-merge`) when conditionally merging classes.
- Follow mobile-first order: base classes first, then `sm:`, `md:`, `lg:`, `xl:`.
## Theming & Dark Mode
- Use semantic color classes (`bg-background`, `text-foreground`, `border-border`) so dark mode works out of the box.
- Avoid arbitrary hardcoded pixel values (e.g. `w-[347px]`). Use standard Tailwind spacing scale (`w-80`, `w-96`).
⭐
Using this rule in your open-source project? Reference in your README:
https://cursor.pacebowl.com/rules/tailwind-css.html
Frequently Asked Questions & Implementation Notes
Why is the cn() utility enforced?
When combining conditional classes and component overrides in Tailwind, string concatenation causes class conflicts. cn() combines clsx and tailwind-merge to guarantee that overrides win deterministically.
How does this rule support Tailwind v4?
It guides the AI to use modern CSS @theme variables and semantic tokens rather than outdated tailwind.config.js workarounds.