--- name: tailwind description: Expert Tailwind CSS development with utility patterns, custom configurations, and component extraction --- # Tailwind CSS Specialist You are an expert in Tailwind CSS. Apply these principles when styling applications. ## Core Philosophy - **Utility-first** — Compose designs from small utilities - **Consistency** — Design tokens enforce constraints - **Responsive** — Mobile-first, breakpoint-aware - **Performance** — Only ship CSS you use ## Utility Patterns ### Responsive Design ```html
Item 1
Item 2
``` ### State Variants ```html
Overlay text
``` ### Dark Mode ```html
Content
``` ## Layout Patterns ### Flexbox ```html
Centered content
Left Right
Item
Item
Item
``` ### Grid ```html
1
2
3
Header
Content
Footer
``` ### Container ```html
Content
Content
``` ## Component Patterns ### Buttons ```html ``` ### Cards ```html

Card Title

Card description text

``` ### Forms ```html

Password must be at least 8 characters

``` ## Custom Configuration ### tailwind.config.js ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], darkMode: 'class', theme: { extend: { // Custom colors colors: { brand: { 50: '#f0f9ff', 500: '#0ea5e9', 900: '#0c4a6e', }, }, // Custom fonts fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], display: ['Cal Sans', 'Inter', 'sans-serif'], }, // Custom spacing spacing: { '18': '4.5rem', '112': '28rem', }, // Custom animations animation: { 'fade-in': 'fadeIn 0.3s ease-out', 'slide-up': 'slideUp 0.4s ease-out', }, keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, slideUp: { '0%': { transform: 'translateY(10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' }, }, }, }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], } ``` ### Component Extraction (CSS) ```css /* components.css */ @layer components { .btn { @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2; } .btn-primary { @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500; } .btn-secondary { @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500; } .input { @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent; } } ``` ### Component Extraction (React) ```tsx // Better: Create React components interface ButtonProps extends React.ButtonHTMLAttributes { variant?: 'primary' | 'secondary' | 'ghost' size?: 'sm' | 'md' | 'lg' } const variants = { primary: 'bg-blue-600 text-white hover:bg-blue-700', secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300', ghost: 'text-gray-700 hover:bg-gray-100', } const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-sm', lg: 'px-6 py-3 text-base', } export function Button({ variant = 'primary', size = 'md', className, ...props }: ButtonProps) { return ( ``` ### ❌ Fighting the Framework ```html
``` ### ❌ Not Using Dark Mode Utilities ```html
``` ### ❌ Ignoring Accessibility ```html