tailwind-patterns

To migrate from Tailwind v3 to v4, you replace JavaScript configuration files with CSS-first theming by defining theme tokens, colors, spacing, and typography directly in CSS. This approach modernizes layouts using semantic tokens and mobile-first responsive behavior.

You set up CSS-first theming in Tailwind v4 by defining your design tokens, colors, spacing, and typography directly within your CSS files. This replaces older JavaScript config workflows and standardizes consistent layout patterns for maintainable interfaces.

Container queries in Tailwind enable mobile-first responsive behavior by styling components based on their parent container dimensions rather than the viewport. This allows building responsive card grids and flexible layouts that adapt accurately within production-ready UI work.

The best way to implement dark mode is by using semantic design tokens and OKLCH color thinking within your CSS-first theme variables. This ensures accessible dark mode styling and maintains scalable color consistency across your components without fragile overrides.

Tailwind v4 does not require JavaScript configuration for design tokens. You define semantic tokens, typography, and spacing directly in CSS using a CSS-first setup, which eliminates outdated JavaScript config workflows and streamlines component extraction.

Tailwind CSS responsive utilities often break during migration due to outdated configuration patterns or inconsistent spacing. Rebuilding layouts with mobile-first breakpoints, container queries, and semantic token definitions aligns components with modern v4 conventions and fixes fragile responsive behavior.