tailwindcss-development

Tailwind CSS v4 uses CSS-first configuration with the @theme directive defined directly in your CSS file. You declare custom values like colors as CSS variables inside @theme, and no separate JavaScript config file is needed.

Replace the @tailwind base, components, and utilities directives with a single @import "tailwindcss" statement. Also update deprecated utilities such as flex-shrink-* to shrink-*, flex-grow-* to grow-*, and bg-opacity-* to bg-black/* style opacity modifiers.

Yes, Tailwind v4 supports dark mode through the dark: variant applied to utilities, such as dark:bg-gray-900. New pages and components should follow the same dark mode conventions already used in the project.

Inconsistent spacing usually comes from applying margins to individual children instead of using gap utilities on the parent container. Use flex or grid with gap-4 or gap-8 on the parent so spacing is uniform and easier to maintain.

Common mistakes include using deprecated v3 utilities, keeping @tailwind directives instead of the v4 import, relying on tailwind.config.js or corePlugins which v4 does not support, and forgetting dark mode variants in projects that use them.