78 lines
2.1 KiB
Plaintext
78 lines
2.1 KiB
Plaintext
---
|
|
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 |