tailwind

tailwind

Tailwind CSS and UI component best practices for modern web applications

cursor **/*.css **/*.tsx **/*.jsx tailwind.config.js

स्किल 

# 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

इसे कैसे लगाएं 

1. Open the tool and start a new conversation, project or template.
2. Paste the text below wherever the tool keeps standing instructions
   — usually called system prompt, instructions, or persona.
3. Save it so it applies to every run rather than a single message.

क्या यह आपके काम आई?

यह कहाँ से आई

PatrickJS and contributors CC0-1.0 मूल

and Related Rights in the Work and the meaning and intended legal

क्या हम इस विज़िट को गिन सकते हैं?

यह साइट कोई एनालिटिक्स सेवा, कोई विज्ञापन और बाहर से कोई फ़ॉन्ट नहीं लाती। हम आपको दिन में एक बार गिनना चाहते हैं, ताकि पता चले कि कोई इसे पढ़ भी रहा है या नहीं। इसमें एकतरफ़ा कुंजी लगती है जो दो दिन बाद नष्ट हो जाती है, और जब तक आप हाँ न कहें यह बंद रहती है। हम क्या रखते हैं