tailwindcss

Tailwind v4 uses CSS-first configuration: import "tailwindcss" in your globals.css and define custom colors, spacing, fonts, and breakpoints inside an @theme block using CSS variables like --color-brand-500. The v3 tailwind.config.js file is still supported for compatibility.

Add the dark: variant prefix to any utility, such as bg-white dark:bg-gray-900 or text-gray-900 dark:text-gray-100. Dark mode can follow the prefers-color-scheme media query or a class-based strategy depending on your configuration.

Tailwind v4 uses CSS-first configuration through @import and @theme instead of requiring tailwind.config.js, and automatically detects template files without a content array. It also delivers faster builds but requires Safari 16.4+, Chrome 111+, or Firefox 128+.

Yes, Tailwind uses mobile-first breakpoint prefixes: sm, md, lg, xl, and 2xl. Write base classes for mobile, then add prefixed variants like md:w-1/2 lg:w-1/3 to scale layouts up on larger screens.

Use @apply sparingly, mainly when extracting repeated utility patterns into reusable CSS classes like .btn-primary. Prefer utility classes directly in JSX for most styling, reserving @apply for genuinely shared component styles.