tailwind-css-patterns

Use grid utilities with responsive prefixes, such as "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", which renders one column on mobile, two on tablets, and four on desktop. Tailwind's mobile-first breakpoints apply styles at 640px, 768px, 1024px, and above.

Install tailwindcss and @tailwindcss/vite, then add the tailwindcss() plugin to your vite.config.ts plugins array. Import "tailwindcss" in your main CSS file and define custom design tokens with the @theme directive instead of a JavaScript config file.

Yes, Tailwind supports dark mode via the dark: variant prefix, such as "bg-white dark:bg-gray-900". It can follow the system's prefers-color-scheme media query or be toggled manually by adding a .dark class to the document root.

Missing classes usually result from incorrect content path configuration, which prevents the build process from detecting used utilities. Ensure all template file paths are listed in the content array, and use the safelist option for dynamically generated class names.

Extract repeated utility patterns into reusable components when the same class combination appears across multiple elements, such as buttons or cards. This improves readability and maintainability while keeping the utility-first workflow for one-off styles.