Installation
Install Tailwind CSS
Install and configure Tailwind CSS v4 for utility-first styling in Next.js.
1
Install Tailwind CSS v4
Install tailwindcss and the official PostCSS plugin for compilation.
pnpm add tailwindcss @tailwindcss/postcss postcss2
Configure PostCSS
Create a postcss.config.js file in your project root to enable Tailwind compilation.
postcss.config.js
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
},
}3
Import Tailwind in globals.css
Add the @import directive at the very top of your global CSS file to import Tailwind utilities and directives.
app/globals.css
@import "tailwindcss";