Published on

How to Style Next.js with Tailwind CSS v4 in 2026

Styling a Next.js application with Tailwind CSS allows you to build custom user interfaces in under 30 minutes by applying utility classes (pre-defined CSS rules) directly to your HTML elements. By using this combination in 2026, you can eliminate the need for writing traditional CSS files and ensure your website is fully responsive and optimized for performance out of the box.

What do you need before starting?

Before you begin building, ensure your development environment is ready for modern web standards. We recommend using the following versions to ensure compatibility with the latest features:

  • Node.js 22 or 24 LTS: The runtime (environment that runs JavaScript on your computer) required to execute Next.js.
  • Next.js 15: The latest version of the React framework.
  • Tailwind CSS v4: The modern, CSS-first version of the styling engine.
  • A Code Editor: Visual Studio Code is the standard choice for most developers.

Why is Tailwind CSS the best choice for Next.js?

Tailwind CSS works differently than traditional CSS because it uses utility-first classes. Instead of creating a separate file and writing background-color: blue;, you simply add the class bg-blue-500 to your element.

This approach prevents your CSS files from growing too large as your project expands. Since Tailwind only includes the styles you actually use in your final build, your website stays fast and lightweight.

It also solves the problem of "naming fatigue." You no longer have to spend time deciding if a container should be named header-wrapper or top-section-container.

How do you create a new Next.js project with Tailwind?

The fastest way to get started is by using the automated setup tool provided by the Next.js team. This tool handles the installation of all necessary packages and configures them to work together.

Step 1: Open your terminal Open your computer's terminal (or command prompt) and navigate to the folder where you want to keep your projects.

Step 2: Run the installation command Type the following command and press Enter:

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

Step 3: Select the configuration options The installer will ask you a series of questions. To follow this guide, choose these options:

  • Would you like to use TypeScript? Yes
  • Would you like to use ESLint? Yes
  • Would you like to use Tailwind CSS? Yes
  • Would you like to use src/ directory? Yes
  • Would you like to use App Router? Yes
  • Would you like to customize the default import alias? No

What you should see: After the process finishes, a new folder named my-awesome-project will appear. The tool automatically installs Tailwind CSS v4 and sets up the necessary links between your styles and your components.

How do you configure Tailwind CSS v4 in Next.js 15?

In the current version of Tailwind (v4), configuration has moved away from JavaScript files and into your CSS files. This makes the setup cleaner and faster.

Open the file located at src/app/globals.css. You should see the new way Tailwind is imported:

/* src/app/globals.css */
@import "tailwindcss";

/* This is where you can define custom theme variables */
@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui;
  --color-brand: #3b82f6;
}

In this setup, @import "tailwindcss" replaces the old three-line directive used in previous years. The @theme block is where you define your custom colors or fonts.

This CSS-first approach is much easier for beginners to manage. It keeps all your styling logic in one place without needing complex TypeScript configuration files.

How do you apply styles to your components?

Now that the setup is complete, you can start styling your application using classes. Open src/app/page.tsx and replace the code with this simple example:

export default function Home() {
  return (
    // 'min-h-screen' makes the container fill the whole height of the browser
    // 'flex' and 'items-center' center the content vertically and horizontally
    <main className="min-h-screen flex items-center justify-center bg-slate-50">
      <div className="p-8 bg-white shadow-xl rounded-2xl border border-slate-200">
        {/* 'text-3xl' sets font size, 'font-bold' adds weight */}
        <h1 className="text-3xl font-bold text-slate-900 mb-4">
          Hello World!
        </h1>
        <p className="text-slate-600 mb-6">
          You are now styling with Tailwind CSS v4.
        </p>
        {/* 'hover:bg-blue-700' changes the color when you move your mouse over it */}
        <button className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
          Get Started
        </button>
      </div>
    </main>
  );
}

What you should see: When you run npm run dev in your terminal and visit localhost:3000, you will see a centered white card with a soft shadow and a blue button.

Don't worry if the class names feel like a lot to memorize at first. Most developers use the official documentation or a browser extension to look them up as they work.

Why is the Tailwind VS Code extension helpful?

We've found that using the "Tailwind CSS IntelliSense" extension is the single best way to learn the framework. It provides a dropdown menu of suggestions as you type inside your className attributes.

It also shows you the actual CSS code that each utility class generates. This helps you understand what is happening "under the hood" while you build.

If you make a typo, the extension will often highlight it for you. This prevents the frustration of wondering why a specific style isn't appearing on your screen.

What are some common beginner mistakes?

It is normal to run into small hurdles when learning a new framework. Here are a few things to watch out for:

  • Forgetting the Import: Ensure @import "tailwindcss"; is at the very top of your globals.css file. If it isn't there, none of your utility classes will work.
  • Class Name Typos: Tailwind classes must be spelled exactly right. For example, text-center works, but txt-center will do nothing.
  • Over-styling: Beginners often try to put too many classes on one element. If a line of code gets too long, try breaking it into multiple lines or creating a smaller React component.
  • Caching Issues: If you change a color in your @theme block and don't see the update, try refreshing your browser or restarting your development server by pressing Ctrl+C and typing npm run dev again.

Next Steps

Now that you have your first styled page, try experimenting with responsive design. You can add prefixes like md: or lg: to your classes (e.g., md:text-5xl) to change how the site looks on tablets or laptops.

Once you feel comfortable with basic colors and spacing, look into "Tailwind Plugins" to add features like typography or forms. Building a small project, like a personal portfolio or a simple weather app, is the best way to lock in these skills.

For more detailed guides, visit the official Next.js documentation.

Read the Next.js Documentation