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