Tailwind CSS has transformed frontend development with its utility-first approach, and version 4 takes it to the next level. Tailwind CSS v4.0 is a complete overhaul of the framework—redesigned for performance, flexibility, and modern web standards. It introduces a streamlined configuration experience and powerful new customization options, all while leveraging the latest capabilities of the web platform.

According to their official blogpost about the new release. Version 4 offers the following:

• New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
• Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with @property, and color-mix().
• Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
• First-party Vite plugin — tight integration for maximum performance and minimum configuration.
• Automatic content detection — all of your template files are discovered automatically, with no configuration required.
• Built-in import support — no additional tooling necessary to bundle multiple CSS files.
• CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
• CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
• Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
• Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
• Container queries — first-class APIs for styling elements based on their container size, no plugins required.
• New 3D transform utilities — transform elements in 3D space directly in your HTML.
• Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.

and more…

In this guide, we’ll show you how to integrate Tailwind CSS v4 into your Nuxt 3 project step by step.

Prerequisites

Before getting started, make sure you have the following:

• Node.js (version 18 or higher is recommended)
• A package manager like npm, Yarn, or pnpm
• Basic familiarity with Vue.js and Nuxt

Step 1: Create a New Nuxt 3 Project

If you don't already have a Nuxt 3 project, let's start by creating one:

npx nuxi init my-nuxt-tailwind-app
cd my-nuxt-tailwind-app
npm install

Step 2: Install and Configure Tailwind CSS

Now, let's install Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

Now add the @tailwindcss/vite plugin to your Nuxt configuration as a Vite plugin.

//nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  // ...
    vite: {
        plugins: [tailwindcss()],
    }
});

Step 3: Import Tailwind CSS

Create an ./assets/css/main.css file and add an @import that imports Tailwind CSS.

/* main.css */

@import "tailwindcss";

Step 4: Add the CSS file globally

Link your newly-created ./assets/css/main.css to your nuxt.config.ts file.

//nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
    // ... 
    css: ['~/assets/css/main.css'],
    vite: {
        plugins: [tailwindcss()],
    }
});

And that’s it—Tailwind CSS v4 is now set up and ready to use in your Nuxt project. To make sure everything is working correctly, let’s add a quick verification step.

Step 5: Verify the Installation

To confirm Tailwind CSS is working, create or update your app.vue file with the following basic example:

<!-- app.vue -->
<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
      <h1 class="text-3xl font-bold text-center text-gray-800 mb-4">
        Tailwind CSS v4 + Nuxt 3
      </h1>
      <p class="text-gray-600 text-center">
        Your Tailwind CSS v4 is successfully installed in your Nuxt 3 project!
      </p>
      <div class="mt-6">
        <button class="btn-primary w-full">
          Custom Component with Tailwind
        </button>
      </div>
    </div>
  </div>
</template>

Now, your updated code should render in the browser like this:

We are now using the latest version on Tailwind V4 in our project.

Conclusion

You've successfully integrated Tailwind CSS v4 with your Nuxt 3 project! Tailwind CSS v4.0 represents a significant leap forward, focusing on performance and embracing modern CSS features to provide a more streamlined and powerful development experience.

This powerful combination of Tailwind CSS and Nuxt allows you to build responsive, maintainable, and beautiful user interfaces with ease. The utility-first approach of Tailwind combined with Nuxt's Vue-based framework provides an exceptional developer experience.

As you continue to develop your application, explore Tailwind's extensive documentation to discover some of the amazing features offered in the new update. You will most certainly love it.