Styling with Tailwind CSS v4

Tailwind CSS v4 is a major update that brings a new CSS-first configuration model, improved performance, and a smaller footprint. Unlike v3 where you configured everything in a JavaScript file, v4 uses native CSS features like `@theme` and `@import`.

To use Tailwind v4 in your Next.js project, install `tailwindcss` and `@tailwindcss/postcss`, then configure PostCSS to use the plugin. In your CSS file, add `@import "tailwindcss"` at the top.

Customization is done through CSS variables and the `@theme` directive. For example, you can define custom colors, fonts, and spacing values directly in your CSS file without leaving the stylesheet.