tailwind-csslisted

# Tailwind CSS Skill ## Overview Expert guidance for Tailwind CSS styling with mobile-first responsive design, custom themes, and utility-first approach. Focuses on accessibility, dark mode, and performance optimization. ## When This Skill Applies This skill triggers when users request: - **Styling**: "Style this KPI card", "Button component style", "Design a form" - **Responsive**: "Mobile-first layout", "Responsive dashboard", "Grid with breakpoints" - **Themes**: "Custom dark theme", "Extend tailwind theme", "Color scheme" - **Layouts**: "Dashboard grid", "Card layout", "Flexible container" ## Core Rules ### 1. Mobile-First Design ```jsx // ✅ GOOD: Mobile-first progressive enhancement <div className="w-full px-4 py-2 sm:w-1/2 sm:px-6 md:w-1/3 md:px-8 lg:w-1/4"> <KPICard /> </div> // Breakpoints: // sm: 640px - Small tablets/phones // md: 768px - Tablets // lg: 1024px - Desktops // xl: 1280px - Large screens // 2xl: 1536px - Extra large screens ``` **Requirements:** - Base styles for mobile (no prefix) - Progressive enhancement with `sm:`, `md:`, `lg:` prefixes - Start with mobile layout, enhance for larger screens - Use responsive breakpoints: `sm:640px`, `md:768px`, `lg:1024px` ### 2. Responsive Utilities ```jsx // ✅ GOOD: Fluid responsive layouts <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"> {items.map(item => <Item key={item.id} item={item} />)} </div> // ✅ GOOD: Responsive spacing <div className="p-4 sm:p-6