tailwind
via PatrickJS/awesome-cursorrules
Tailwind CSS and UI component best practices for modern web applications
What is tailwind?
This rule provides guidance on using Tailwind CSS effectively in web projects, covering configuration, component styling, layout, typography, colors, and responsive design. Use it when building or maintaining applications with Tailwind to ensure consistent utility-first styling, proper theme setup, and accessibility compliance.
- Configure Tailwind projects with proper theme extension, purge settings, and custom spacing/breakpoints
- Style components using utility classes with @apply for related utilities and proper state variants
- Implement responsive design with mobile-first approach, container queries, and semantic breakpoints
- Manage colors with semantic naming, contrast checking, opacity utilities, and gradient support
- Build accessible, performant layouts using Flexbox/Grid utilities with proper spacing and alignment
- Optimize bundle size through purge configuration, code splitting, and production build strategies
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
Tailwind CSS and Next.js development guide with TypeScript, DaisyUI, and Biome integration.
Mobile-first Tailwind + React + Firebase setup with responsive design and best practices.
Tailwind CSS and shadcn/ui development guide for TypeScript Next.js in VSCode.
TanStack Query v5 patterns: queryOptions, key factories, mutations, optimistic updates, and Suspense mode.
Expert guidance for TanStack Query v5: queries, mutations, optimistic updates, infinite queries, and Suspense patterns.
Type-safe file-based routing for React with TanStack Router v1, loaders, and search params validation.