How to Install Tailwind CSS v4 in Next.js (Step-by-Step Guide)

If you're using Next.js and want to add Tailwind CSS, it's now easier than ever! Tailwind CSS v4 is faster and comes with a new setup that works smoothly with modern frameworks. In this guide, I'll show you step by step how to install and use it in your Next.js project.

1. Create Next.js Project

This will initialize next.js app in the current directory

npx create-next-app@latest ./

2. Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss

3. Configure PostCSS Plugins

Create postcss.config.mjs and add the following configuration.

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

4. Add tailwind to Global Css

Open the globals.css file in your Next.js app and add the following at the top:

@import "tailwindcss";

5. Start your app

npm run dev

6. Use Tailwind CSS in your project

 <h1 className="text-red-500 font-bold">
     Working!
 </h1>

A major change in Tailwind CSS v4 is moving from JavaScript configuration to CSS.

Now, instead of using a tailwind.config.js file, you can set up your custom styles directly in your CSS file.

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.95 0.1 200);
  --color-secondary: oklch(0.85 0.15 150);
  --color-accent: oklch(0.75 0.2 100);
  --color-background: oklch(0.98 0 0);
  --color-text: oklch(0.2 0 0);
}

Final Thoughts!

By following this guide, you’ve successfully set up Tailwind CSS v4 in Next.js.

If you found this guide helpful, share it with your developer friends! Follow Me for More 💖