tailwind — Cursor rule: what it does, how to install
Guides Cursor on Tailwind CSS standards and mobile-first component styling. Triggers automatically when editing styles, JSX, TSX, or config files.
.cursor/rules/tailwind.mdcWhat tailwind does
This rule provides Cursor with standards for Tailwind CSS styling. It instructs the agent to favor utility classes over custom CSS, organize shared styles with @apply, and structure responsive layouts using a mobile-first approach. When structuring interfaces, it relies on Flexbox or Grid utilities and suggests using shadcn/ui components whenever available.
The guidelines cover semantic color tokens, dark mode variants, and typography scales. For performance, the prompt directs Cursor to optimize production builds by configuring purge settings and minimizing manual CSS.
Because alwaysApply is false, Cursor loads these instructions strictly when matching files like **/*.css, **/*.tsx, or tailwind.config.ts are open.
What it helps with
- build mobile-first responsive layouts with Flexbox and Grid
- replace custom CSS declarations with Tailwind utility classes
- implement semantic colors and dark mode variants in components
- configure theme extensions and breakpoints in
tailwind.config.ts
Example prompts for the agent
- Build a responsive pricing card using Tailwind CSS with dark mode support.
- Refactor this custom CSS modal into Tailwind utility classes.
- Add custom container query breakpoints and spacing to
tailwind.config.ts.
How to install tailwind
Manually: put the files in place
.cursor/rules/tailwind.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/tailwind.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/tailwind.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/tailwind.mdManually: put the files in place
.clinerules/tailwind.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about tailwind
How do I install tailwind in Cursor?
Save the rule content directly to .cursor/rules/tailwind.mdc in your project repository.
What does the tailwind rule do in Cursor?
It enforces Tailwind CSS standards, including utility-first styling, mobile-first breakpoints, semantic colors, and purge configuration.
When does Cursor activate this rule?
The rule applies to **/*.css, **/*.tsx, **/*.jsx, tailwind.config.js, and tailwind.config.ts. Because alwaysApply is set to false, Cursor ignores it for other files.
Source text
tailwind.mdc · CC0-1.0
--- description: "Tailwind CSS and UI component best practices for modern web applications" globs: **/*.css, **/*.tsx, **/*.jsx, tailwind.config.js, tailwind.config.ts alwaysApply: false --- # Tailwind CSS Best Practices ## Project Setup - Use proper Tailwind configuration - Configure theme extension properly - Set up proper purge configuration - Use proper plugin integration - Configure custom spacing and breakpoints - Set up proper color palette ## Component Styling - Use utility classes over custom CSS - Group related utilities with @apply when needed - Use proper responsive design utilities - Implement dark mode properly - Use proper state variants - Keep component styles consistent ## Layout - Use Flexbox and Grid utilities effectively - Implement proper spacing system - Use container queries when needed - Implement proper responsive breakpoints - Use proper padding and margin utilities - Implement proper alignment utilities ## Typography - Use proper font size utilities - Implement proper line height - Use proper font weight utilities - Configure custom fonts properly - Use proper text alignment - Implement proper text decoration ## Colors - Use semantic color naming - Implement proper color contrast - Use opacity utilities effectively - Configure custom colors properly - Use proper gradient utilities - Implement proper hover states ## Components - Use shadcn/ui components when available - Extend components properly - Keep component variants consistent - Implement proper animations - Use proper transition utilities - Keep accessibility in mind ## Responsive Design - Use mobile-first approach - Implement proper breakpoints - Use container queries effectively - Handle different screen sizes properly - Implement proper responsive typography - Use proper responsive spacing ## Performance - Use proper purge configuration - Minimize custom CSS - Use proper caching strategies - Implement proper code splitting - Optimize for production - Monitor bundle size ## Best Practices - Follow naming conventions - Keep styles organized - Use proper documentation - Implement proper testing - Follow accessibility guidelines - Use proper version control
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules
