Tailwind

Critical Patterns

Responsive Design (REQUIRED)

<!-- ✅ ALWAYS: Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full width on mobile, half on medium, third on large -->
</div>

Component Extraction (REQUIRED)

// ✅ ALWAYS: Extract repeated patterns to components
function Button({ variant = "primary", children }) {
  const base = "px-4 py-2 rounded font-medium transition";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
  };
  
  return (
    <button className={`${base} ${variants[variant]}`}>
      {children}
    </button>
  );
}

Dark Mode (REQUIRED)

<!-- ✅ Use dark: prefix for dark mode -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content
</div>

Decision Tree

Need spacing?              → Use p-*, m-*, gap-*
Need sizing?               → Use w-*, h-*, max-w-*
Need colors?               → Use bg-*, text-*, border-*
Need responsive?           → Use sm:, md:, lg:, xl:
Need states?               → Use hover:, focus:, active:
Need animations?           → Use animate-*, transition-*

Commands

npx tailwindcss init -p    # Initialize with PostCSS
npx tailwindcss -o output.css --minify  # Build for production