tailwind-patterns

# Tailwind Patterns ## Core Approach - Utility-first: compose classes, don't write custom CSS - Extract components, not classes (use React components, not `@apply`) - Consistent spacing/color via design tokens ## Component Patterns ### Button Variants ```tsx const buttonVariants = { primary: 'bg-blue-600 hover:bg-blue-700 text-white', secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-900', danger: 'bg-red-600 hover:bg-red-700 text-white', ghost: 'hover:bg-gray-100 text-gray-700', } interface ButtonProps { variant?: keyof typeof buttonVariants size?: 'sm' | 'md' | 'lg' children: React.ReactNode } export const Button = ({ variant = 'primary', size = 'md', children }: ButtonProps) => { const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' } return ( <button className={`${buttonVariants[variant]} ${sizes[size]} rounded-lg font-medium transition-colors`}> {children} </button> ) } ``` ### Responsive Design ```tsx // Mobile-first approach <div className=" flex flex-col // mobile: stack md:flex-row // tablet: row lg:grid lg:grid-cols-3 // desktop: 3 columns gap-4 "> ``` ### Dark Mode ```tsx // Use dark: prefix <div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"> <p className="text-gray-600 dark:text-gray-400"> Secondary text </p> </div> ``` ## Design Tokens (v4) ```css /* In CSS — v4 uses CSS variables */ @theme { --color-primary: oklch(0.6 0.2 ...