tailwind
via PatrickJS/awesome-cursorrules
Tailwind CSS and UI component best practices for modern web applications
What is tailwind?
This rule provides guidance on Tailwind CSS setup, component styling, layout, typography, colors, and responsive design patterns. Use it when building web applications with Tailwind to ensure consistent utility-first styling, proper configuration, and accessibility compliance.
- Configure Tailwind projects with proper theme extension, purge settings, and custom spacing/breakpoints
- Style components using utility classes with responsive variants, dark mode, and state management
- Implement responsive layouts with Flexbox/Grid utilities, container queries, and mobile-first breakpoints
- Manage colors with semantic naming, contrast compliance, opacity utilities, and gradient effects
- Integrate shadcn/ui components and extend them with consistent variants and animations
- Optimize bundle size through proper purge configuration and minimize custom CSS usage
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
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
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.