tailwindcsslisted

# Tailwind CSS v4 Development Guidelines Best practices for using Tailwind CSS v4 utility classes effectively. **Note**: Tailwind CSS v4 (released January 2025) uses a CSS-first configuration approach. If you need v3 compatibility, tailwind.config.js is still supported. ## Core Principles 1. **Utility-First**: Use utility classes instead of custom CSS 2. **Mobile-First**: Design for mobile, then scale up with responsive modifiers 3. **Component Extraction**: Extract repeated patterns into components 4. **Consistent Spacing**: Use Tailwind's spacing scale 5. **Custom Configuration**: Extend the default theme for brand consistency ## Basic Utilities ### Layout ```tsx // Flexbox <div className="flex items-center justify-between gap-4"> <div className="flex-1">Content</div> <div className="flex-shrink-0">Sidebar</div> </div> // Grid <div className="grid grid-cols-3 gap-4"> <div>1</div> <div>2</div> <div>3</div> </div> // Positioning <div className="relative"> <div className="absolute top-0 right-0">Badge</div> </div> ``` ### Spacing ```tsx // Padding and Margin <div className="p-4 m-2"> {/* padding: 1rem, margin: 0.5rem */} <div className="px-6 py-4"> {/* padding-x: 1.5rem, padding-y: 1rem */} <div className="mt-8 mb-4"> {/* margin-top: 2rem, margin-bottom: 1rem */} // Space between children <div className="space-y-4"> {/* margin-bottom on all but last child */} <div>Item 1</div> <div>Item 2</div> </div> ``` ### Typograp