{"filename":"tailwind.mdc","content":"---\ndescription: \"Tailwind CSS and UI component best practices for modern web applications\"\nglobs: **/*.css, **/*.tsx, **/*.jsx, tailwind.config.js, tailwind.config.ts\nalwaysApply: false\n---\n# Tailwind CSS Best Practices\n\n## Project Setup\n- Use proper Tailwind configuration\n- Configure theme extension properly\n- Set up proper purge configuration\n- Use proper plugin integration\n- Configure custom spacing and breakpoints\n- Set up proper color palette\n\n## Component Styling\n- Use utility classes over custom CSS\n- Group related utilities with @apply when needed\n- Use proper responsive design utilities\n- Implement dark mode properly\n- Use proper state variants\n- Keep component styles consistent\n\n## Layout\n- Use Flexbox and Grid utilities effectively\n- Implement proper spacing system\n- Use container queries when needed\n- Implement proper responsive breakpoints\n- Use proper padding and margin utilities\n- Implement proper alignment utilities\n\n## Typography\n- Use proper font size utilities\n- Implement proper line height\n- Use proper font weight utilities\n- Configure custom fonts properly\n- Use proper text alignment\n- Implement proper text decoration\n\n## Colors\n- Use semantic color naming\n- Implement proper color contrast\n- Use opacity utilities effectively\n- Configure custom colors properly\n- Use proper gradient utilities\n- Implement proper hover states\n\n## Components\n- Use shadcn/ui components when available\n- Extend components properly\n- Keep component variants consistent\n- Implement proper animations\n- Use proper transition utilities\n- Keep accessibility in mind\n\n## Responsive Design\n- Use mobile-first approach\n- Implement proper breakpoints\n- Use container queries effectively\n- Handle different screen sizes properly\n- Implement proper responsive typography\n- Use proper responsive spacing\n\n## Performance\n- Use proper purge configuration\n- Minimize custom CSS\n- Use proper caching strategies\n- Implement proper code splitting\n- Optimize for production\n- Monitor bundle size\n\n## Best Practices\n- Follow naming conventions\n- Keep styles organized\n- Use proper documentation\n- Implement proper testing\n- Follow accessibility guidelines\n- Use proper version control\n"}