How to Set Up Tailwind CSS 4 in a Next.js App

Want to build fast, responsive UIs without wrestling with bloated CSS or endless configuration? Tailwind CSS 4 paired with Next.js makes that possible. Whether you're starting a fresh project or integrating Tailwind into an existing app, the setup is now cleaner, faster, and more flexible than ever.

In this article, we’ll walk you through the most efficient way to install Tailwind CSS 4 in a Next.js project. From automated setups to PostCSS integration, you’ll be ready to start coding immediately, with no guesswork and no clutter. Let’s get your development environment ready the smart way.

Install Tailwind in your project

We can install Tailwind in two ways:

1. Install Tailwind at the time of creating next.js project 
2. Install Tailwind in an existing project.

Install Tailwind at the time of creating the Next.js project

The quickest way to create a new Next.js app with Tailwind is to use create-next-app, which sets up everything automatically for you. To create a project, run:

npx create-next-app@latest my-project
cd my-project

It will provide a bunch of items to select at the time of installing next.js:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

Select yes on Tailwind CSS to prebuild it. It will automatically generate all the necessary files during installation. That’s all; you are now ready to use Tailwind in your project.

Install Tailwind in an existing project.

Suppose you have a pre-installed Next.js project without Tailwind. Now,  follow these steps to install tailwind in your project.

Step 1: Install Tailwind CSS 4

Next, use npm to install @tailwindcss/postcss and its dependencies.

npm install tailwindcss @tailwindcss/postcss postcss

Step 2: Configure PostCSS Plugins

At this stage, add the @tailwindcss/postcss plugin to your PostCSS configuration by creating a postcss.config.mjs file in the root of your project.

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

Step 3: Add Tailwind to Your CSS

Depending on your structure, add an @import to your ./src/app/globals.css file that imports Tailwind CSS.

@import "tailwindcss";

Next.js automatically includes this global CSS in your app.

Step 4: Start the Dev Server

You’re ready to go! Run the development server:

npm run dev

Visit http://localhost:3000 and start adding Tailwind classes to your components.

Example Component

Here’s a simple Next.js component using Tailwind 4:

export default function Hero() {
  return (
    <section className="flex items-center justify-center min-h-screen bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
      <div className="text-center space-y-4">
        <h1 className="text-5xl font-bold">Welcome to Tailwind 4 + Next.js</h1>
        <p className="text-lg">Build responsive, fast, and beautiful UIs with ease.</p>
        <button className="px-6 py-2 bg-white text-indigo-600 font-semibold rounded-full hover:bg-indigo-100 transition">
          Get Started
        </button>
      </div>
    </section>
  );
}

Conclusion

Setting up Tailwind CSS 4 in a Next.js app doesn’t need to be complex. With the right tools and approach, it’s a smooth process that sets you up for scalable, responsive design from day one. Whether you're launching a new SaaS product or modernising an existing UI, this integration gives you speed, performance, and control over your front-end workflow.

At StaticMania, we specialise in helping teams and founders like you get the most out of Tailwind and Next.js. From clean installations and advanced theming to component design and responsive layout strategy, our team handles the technical setup so you can focus on building great products. We've helped businesses across industries deliver lightning-fast, mobile-first experiences that perform and scale.

Do you need expert help with setup or want a custom-built UI? Let StaticMania streamline your Tailwind + Next.js development. Schedule your free consultation.