Tailwind CSS Best Practices
IDE Configuration Headers
For Cursor IDE
To create a new Cursor Rule:
- Enter the name as
tailwind
- Copy & paste the following header and rule content below:
---
description: Tailwind CSS Best Practices
globs: **/*.tsx, **/*.jsx, **/*.vue, **/*.html
alwaysApply: false
---
For Kiro IDE
To create a new Kiro Steering Document:
- Create a file named
tailwind.md
in.kiro/steering/
- Copy & paste the following header and rule content below:
---
inclusion: fileMatch
fileMatchPattern: '**/*.tsx,**/*.jsx,**/*.vue,**/*.html'
---
For more information about IDE rules, visit: - Cursor Project Rules - Kiro Steering Documents
Rule Content
---
description: Tailwind CSS Best Practices
globs: **/*.css, **/*.html, **/*.tsx
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