Generate production-ready Tailwind CSS Cursor rules for Project Rules (.mdc), AGENTS.md, or legacy .cursorrules. This template encodes stack-specific conventions for projects using Tailwind CSS. Utility-first CSS framework for rapid UI development with design tokens.
The template focuses Cursor AI on concrete Tailwind CSS practices instead of generic coding advice. Required sections are always included; optional sections can be enabled when they match your project.
The generator turns these sections into Project Rules with frontmatter, AGENTS.md, or a single .cursorrules file depending on the output format you choose.
- Use Tailwind utility classes directly in JSX/HTML — no separate CSS files.
- Use 2 spaces for indentation.
- Avoid @apply — prefer composing components or repeating utilities.
- Use the class-variance-authority (CVA) pattern for component variants.
- Use clsx or cn() utility for conditional class merging.
- Extract repeated patterns into components, not CSS abstractions.- Use mobile-first responsive prefixes (sm:, md:, lg:, xl:, 2xl:).
- Design for the smallest screen first, then add breakpoints for larger.
- Use container with mx-auto for centered content widths.
- Use flexbox (flex, grid) for layouts — avoid float and position hacks.
- Use hidden/md:block pattern for responsive visibility.
- Test layouts at all defined breakpoints.- Extend the default theme in tailwind.config.ts — don't override.
- Use CSS custom properties for dynamic theme values.
- Use dark: prefix for dark mode variants.
- Define design tokens (colors, spacing, fonts) in the extend section.
- Use arbitrary values [value] sparingly — prefer predefined tokens.
- Group related colors with numeric scale (primary-50 through primary-950).