Styling with Tailwind CSS

Quick Start

// Button with variants using utility classes export function Button({ variant = 'primary', size = 'md', children }: ButtonProps) { const base = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50'; const variants = { primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500', outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500', ghost: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800', }; 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={${base} ${variants[variant]} ${sizes[size]}}> {children} </button> ); }

Features

Feature Description Guide

Configuration Extend colors, fonts, spacing, animations ref/config.md

Responsive Design Mobile-first breakpoints: sm, md, lg, xl, 2xl ref/responsive.md

Dark Mode Class-based dark mode with dark: prefix ref/dark-mode.md

Custom Animations Define keyframes and animation utilities ref/animations.md

CSS Variables Theme with CSS custom properties ref/theming.md

Plugins @tailwindcss/forms, typography, container-queries ref/plugins.md

Common Patterns

Responsive Card Grid

export function CardGrid({ children }: { children: React.ReactNode }) { return ( <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6"> {children} </div> ); }

export function Card({ children, hoverable }: { children: React.ReactNode; hoverable?: boolean }) { return ( <div className={cn( 'bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6', hoverable && 'hover:shadow-lg hover:-translate-y-1 transition-all duration-200' )}> {children} </div> ); }

Dark Mode Toggle

export function DarkModeToggle() { const [isDark, setIsDark] = useState(false);

useEffect(() => { const dark = localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches); setIsDark(dark); document.documentElement.classList.toggle('dark', dark); }, []);

const toggle = () => { setIsDark(!isDark); document.documentElement.classList.toggle('dark', !isDark); localStorage.theme = !isDark ? 'dark' : 'light'; };

return ( <button onClick={toggle} className="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"> {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />} </button> ); }

Conditional Classes with cn()

import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

// Usage <div className={cn( 'px-4 py-2 rounded-lg', isActive && 'bg-blue-500 text-white', isDisabled && 'opacity-50 cursor-not-allowed', className )} />

Best Practices

Do Avoid

Use mobile-first responsive design Overusing @apply (prefer utilities)

Leverage cn() for conditional classes Hardcoding colors outside theme

Configure content paths for purging Using arbitrary values excessively

Use CSS variables for theming Mixing styling paradigms

Group related utilities semantically Skipping dark mode variants

Use consistent spacing scales Ignoring responsive testing