tailwind-css-patterns

# Tailwind CSS Development Patterns Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience. ## Overview Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization. ## When to Use - Styling React/Vue/Svelte components - Building responsive layouts and grids - Implementing design systems - Adding dark mode support - Optimizing CSS workflow ## Quick Reference ### Responsive Breakpoints | Prefix | Min Width | Description | |--------|-----------|-------------| | `sm:` | 640px | Small screens | | `md:` | 768px | Tablets | | `lg:` | 1024px | Desktops | | `xl:` | 1280px | Large screens | | `2xl:` | 1536px | Extra large | ### Common Patterns ```html <!-- Center content --> <div class="flex items-center justify-center min-h-screen"> Content </div> <!-- Responsive grid --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <!-- Items --> </div> <!-- Card component --> <div class="bg-white rounded-lg shadow-lg p-6"> <h3 class="text-xl font-bold">Title</h3> <p class="text-gray-600">Description</p> </div> ``` ## Instructions 1. **Start Mobile-First**: Write base styles for mobile, add responsive prefixes (`sm:`, `md:`, `lg:`) for larger screens 2. **Use Design Tokens**: Leverage Tailwi...