Tailwind CSS Cursor Rules
Cursor rules for Tailwind CSS: class organization, component extraction, responsive design, and dark mode conventions.
- Order classes: layout → sizing → spacing → typography → colors → effects - Extract repeated utility patterns into components, not @apply directives - Use the tailwind-merge (twMerge) utility to safely combine conditional classes - Prefer responsive prefixes (sm:, md:, lg:) over custom breakpoints - Use semantic color tokens in tailwind.config.ts (brand, surface, text) over raw colors - Enable dark mode with class strategy; use dark: prefix consistently - Use container queries (cq) for truly component-level responsive design - Avoid inline style overrides; extend the theme for project-specific values
How to use with Cursor
Create a `.cursorrules` file in your project root and paste these rules. Cursor reads this automatically on every AI interaction.
Related Rules
Python Cursor Rules
Best Cursor AI coding rules for Python development. Enforce type hints, PEP 8, Pythonic patterns, and modern Python best practices in your .cursorrules file.
TypeScript Cursor Rules
Cursor rules for TypeScript: enforce strict mode, eliminate any types, and write type-safe code with these .cursorrules configurations.
React Cursor Rules
Cursor rules for React: component patterns, hooks best practices, performance optimization, and clean state management conventions.
Next.js Cursor Rules
Cursor rules for Next.js App Router: server components, data fetching, routing, and deployment best practices.