| --- | |
| description: | |
| globs: | |
| alwaysApply: false | |
| --- | |
| --- | |
| description: Tailwind CSS and UI component best practices for modern web applications | |
| globs: **/*.css, **/*.tsx, **/*.jsx, tailwind.config.js, tailwind.config.ts | |
| --- | |
| # 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 | |