How to Use Tailwind CSS with React, Vue, Next.js, and Vite

Tailwind CSS v4 shipped with a completely new setup process.

And most guides online haven't caught up yet. If you've followed a tutorial recently and hit a wall of errors, that's why. Tools like create-react-app and Vue CLI are deprecated.

The old @tailwind base directives are gone. The config file isn't even created by default anymore.

Here's the good news.

The new setup is actually easier. Tailwind replaces three import lines with one.

The Oxide engine handles JIT compilation and file detection automatically. No config file needed to get started.

In this guide, you'll learn exactly how to set up Tailwind CSS with React, Vue, Next.js, Vite, Webpack, and Parcel. Every step is updated for v4.3, the current stable release as of June 2026.

Let's get into it.

What changed in Tailwind CSS

Tailwind CSS v4 is more than a version upgrade. It fundamentally changes how Tailwind integrates with modern development workflows.

The biggest shift is the new Oxide engine. It delivers significantly faster build performance and changes how CSS processing works under the hood.

The configuration changed, too. tailwind.config.js is no longer created by default. Instead, it moves configuration into your CSS file, which simplifies setup but changes the workflow.

The import syntax is different as well. The old three-directive approach:

@tailwind base; @tailwind components; @tailwind utilities;

has been replaced with a single import:

@import "tailwindcss";

JIT mode is now fully built in. There's nothing to configure or enable manually. It runs automatically across every project.

If you're maintaining a legacy codebase, v3 remains a feasible option. But for new projects targeting modern tooling and browser support, v4 is the recommended starting point.

How to use Tailwind CSS with React

create-react-app is deprecated. For modern React projects, Vite is now the default.

It offers faster startup and builds, and works seamlessly with Tailwind CSS through dedicated Vite integration.

Here's the setup from scratch.

Step 1: Create a React Project with Vite

npm create vite@latest my-app -- --template react
cd my-app
npm install

Using TypeScript?

Replace react with react-ts.

Step 2: Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Tailwind CSS ships with a dedicated Vite plugin.

That means you can skip PostCSS entirely for this setup, reducing configuration and keeping the integration lightweight.

Step 3: Add the Vite Plugin

Open vite.config.js and register the Tailwind plugin:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

This enables Tailwind's Vite integration inside your React build pipeline.

Step 4: Import Tailwind in Your CSS

Open index.css and replace its contents with:

@import "tailwindcss";

Then verify that your CSS file is imported in main.jsx:

import './index.css'

This is all Tailwind needs to start generating utility classes.

Step 5: Start Using Tailwind

Open any React component and add Tailwind utility classes:

export default function App() {
  return (
    <h1 className="text-3xl font-bold text-blue-600">
      Hello Tailwind v4
    </h1>
  )
}

Run the development server:

npm run dev

If everything is configured correctly, Tailwind styles should apply immediately.

That's the complete React setup for Tailwind CSS.

No tailwind.config.js by default, no PostCSS configuration. Just the Vite plugin and a single CSS import.

How to use Tailwind CSS with Next.js

Next.js and Tailwind CSS are one of the most widely used combinations in modern frontend development.

Unlike React + Vite setups, Next.js uses PostCSS integration rather than the Vite plugin.

Here's the recommended setup for Next.js 16 with Tailwind CSS.

Step 1: Create a Next.js Project

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

During setup, select the App Router.

When prompted about Tailwind CSS, choose No. You'll install and configure Tailwind manually.

Step 2: Install Tailwind CSS

npm install -D tailwindcss @tailwindcss/postcss

Next.js relies on PostCSS for CSS processing. Tailwind includes a dedicated PostCSS plugin built specifically for this workflow.

Step 3: Configure PostCSS

Create or update postcss.config.mjs in your project root:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

This registers Tailwind inside Next.js's PostCSS pipeline.

Step 4: Import Tailwind in Your Global CSS

Open app/globals.css and replace its contents with:

@import "tailwindcss";

Tailwind uses a single CSS import instead of the older three-directive setup.

Step 5: Import CSS in Your Root Layout

Verify that your root layout imports the global stylesheet:

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Without this import, Tailwind styles won't load across your application.

Step 6: Start Using Tailwind

Open a page or component and add Tailwind utility classes:

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello Tailwind v4
      </h1>
    </main>
  )
}

Run the development server:

npm run dev

Then open http://localhost:3000.

If everything is configured correctly, your Tailwind styles should render immediately.

No tailwind.config.js required by default. Tailwind automatically scans your project files and generates the utilities you use.

Dark Mode in Next.js

Tailwind supports dark mode through the built-in dark variant.

To enable class-based dark mode, add this to globals.css:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

Then toggle the dark class on your <html> element to switch themes.

Browser Support

Tailwind CSS v4 targets modern browser environments.

If your project needs to support browsers older than roughly 3 years, Tailwind v3 remains the safer choice.

How to use Tailwind CSS with Vue 3

Vue CLI is deprecated.

For new Vue 3 projects, use npm create vue@latest.

It's the official setup path and the simplest way to start a modern Vue application with Vite.

Step 1: Create a Vue Project

npm create vue@latest my-app
cd my-app
npm install

During setup, you'll see prompts for features like TypeScript, Vue Router, and Pinia.

Select the options that match your project requirements.

Step 2: Install Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

Tailwind CSS v4 includes a dedicated Vite plugin that makes Vue integration straightforward and eliminates the need for a PostCSS setup.

Step 3: Add the Vite Plugin

Open vite.config.js and register the Tailwind plugin:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

This enables Tailwind's Vite integration inside your Vue build process.

Step 4: Import Tailwind in Your CSS

Open src/assets/main.css and replace its contents with:

@import "tailwindcss";

Then verify that main.js imports the stylesheet:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

createApp(App).mount('#app')

Without this import, Tailwind utilities won't be available in your application.

Step 5: Start Using Tailwind in Your Components

Open a Vue component and add utility classes:

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <h1 class="text-3xl font-bold text-blue-600">
      Hello Tailwind v4
    </h1>
  </div>
</template>

Run the development server:

npm run dev

If everything is configured correctly, Tailwind styles should apply immediately.

Scoped Styles vs Utility Classes

Tailwind utility classes and Vue's <style scoped> work together without conflict.

In practice, Tailwind should handle most styling tasks. Use scoped styles when you need component-specific CSS that utility classes can't express cleanly.

Example:

<template>
  <p class="text-gray-700">Tailwind class</p>
  <p class="custom">Scoped style</p>
</template>

<style scoped>
.custom {
  font-size: 1.25rem;
}
</style>

This hybrid approach gives you the speed and consistency of Tailwind while preserving Vue's component-level styling when needed.

Tailwind CSS with Vite (Any Framework)

Vite is the default build tool for many modern JavaScript workflows.

If you're not using React or Vue, you can still integrate Tailwind CSS v4 using the same Vite-based setup.

This approach works with Svelte, Solid, Lit, and virtually any framework built on Vite.

Step 1: Create a Vite Project

npm create vite@latest my-app
cd my-app
npm install

When prompted, select your preferred framework.

Step 2: Install Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

Tailwind CSS v4 includes a dedicated Vite plugin, which keeps the setup lightweight and eliminates the need for a PostCSS configuration.

Step 3: Add the Plugin to Vite

Open vite.config.js and register the Tailwind plugin:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

If your framework requires its own Vite plugin, add it alongside Tailwind's plugin.

For example, here's the setup for Svelte:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    svelte(),
    tailwindcss(),
  ],
})

This pattern applies across most Vite-powered frameworks.

Step 4: Import Tailwind in Your CSS

Find your main stylesheet and replace its contents with:

@import "tailwindcss";

Then verify that your application's entry file imports that stylesheet.

Without the CSS import, Tailwind utilities won't be generated or applied.

Step 5: Start Building

Run the development server:

npm run dev

If everything is configured correctly, Tailwind should detect your template files automatically and compile utility classes on demand.

No content paths. No manual scanning configuration.

Hot Reload

Vite's built-in HMR works seamlessly with Tailwind CSS.

Changes to utility classes appear in the browser immediately, without requiring a full page refresh. That results in a faster development loop, especially in component-heavy projects.

Custom Theme with @theme

Need custom colors, spacing, or design tokens?

In Tailwind v4, you can define them directly in CSS using @theme:

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.53 0.12 118.34);
  --spacing-18: 4.5rem;
}

These tokens become available as standard Tailwind utilities:

<div class="bg-brand text-white p-18">Hello</div>

This CSS-first approach replaces much of the configuration work previously handled in tailwind.config.js.

Tailwind CSS with Webpack

Webpack remains common in legacy applications, enterprise environments, and long-lived frontend stacks.

Tailwind CSS v4.2 introduced a dedicated webpack plugin, which significantly simplified integration by removing the need for a manual PostCSS setup. Tailwind v4.3 improved webpack performance further.

Your setup depends on which Tailwind v4 release you're using.

Option 1: Official Webpack Plugin (Tailwind v4.2+)

If you're running Tailwind v4.2 or later, this is the recommended approach.

Step 1: Install the Packages

npm install tailwindcss @tailwindcss/webpack

Step 2: Add the Plugin to Your Webpack Config

Open your webpack configuration file and register the Tailwind plugin:

const TailwindCSS = require('@tailwindcss/webpack')
  
module.exports = {
  plugins: [
    new TailwindCSS(),
  ],
}

This enables Tailwind directly inside your webpack build pipeline.

Step 3: Import Tailwind in Your CSS

@import "tailwindcss";

That's the complete setup.

No PostCSS configuration required.

Option 2: PostCSS Setup (Tailwind v4.0 and v4.1)

If you're using an earlier Tailwind v4 release, use the PostCSS workflow instead.

Step 1: Install the Packages

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader css-loader

Step 2: Configure PostCSS

Create or update postcss.config.js:

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

This registers Tailwind's PostCSS plugin for CSS processing.

Step 3: Update Your Webpack Config

Add a CSS loader chain that includes postcss-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
}

Step 4: Import Tailwind in Your CSS

@import "tailwindcss";

Tailwind CSS with Parcel

Parcel is a zero-config bundler designed for fast setup and minimal tooling overhead.

It's a practical choice for small projects, prototypes, and lightweight applications where you want to avoid extensive build configuration.

With Tailwind CSS, Parcel relies on PostCSS integration under the hood. Unlike Vite and Webpack, there's currently no dedicated Tailwind plugin for Parcel.

Step 1: Create a Parcel Project

mkdir my-app
cd my-app
npm init -y
npm install parcel
mkdir src
touch src/index.html

Step 2: Install Tailwind CSS v4

npm install tailwindcss @tailwindcss/postcss

Step 3: Configure PostCSS

Create a .postcssrc file in your project root:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Parcel detects this configuration automatically. No additional setup required.

Step 4: Import Tailwind in Your CSS

Create src/index.css and add:

@import "tailwindcss";

Step 5: Link CSS in Your HTML

Update src/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <h1 class="text-3xl font-bold text-blue-600">
      Hello Tailwind v4
    </h1>
  </body>
</html>

Step 6: Start the Development Server

Run:

npx parcel src/index.html

By default, Parcel serves the application at http://localhost:1234.

One Thing to Know

Parcel's built-in CSS transformer can occasionally conflict with Tailwind v4's newer CSS syntax.

If you run into unexpected installation or compilation errors, a common cause is Parcel scanning node_modules and interpreting invalid class candidates.

You can fix this by narrowing Tailwind's scan scope with a source filter:

@import "tailwindcss" source("../src");

This limits scanning to your src directory instead of the entire project.

In practice, this resolves most Parcel + Tailwind scanning issues and keeps builds predictable.

Tailwind CSS Ecosystem and Plugins

Tailwind changed how you load plugins. You no longer register them in tailwind.config.js. You use the @plugin directive in your CSS file instead.

css

@import "tailwindcss";

@plugin "@tailwindcss/typography";

That's the pattern for every official plugin in v4.

@tailwindcss/typography

This plugin adds clean, readable styles to HTML blocks you don't control. Think blog posts, CMS content, and Markdown output.

Install it:

npm install @tailwindcss/typography

Add it to your CSS:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Then wrap your content with the prose class:

<article class="prose">
<h1>My Blog Post</h1>
<p>This text is automatically styled.</p>
</article>

For dark mode, add dark:prose-invert to the same element.

@tailwindcss/forms

This plugin gives form elements a clean base style. Inputs, selects, checkboxes, and textareas look consistent across browsers without extra CSS.

Install it:

npm install @tailwindcss/forms

Add it to your CSS:

@import "tailwindcss";
@plugin "@tailwindcss/forms";

Your form elements pick up the styles automatically.

@tailwindcss/container-queries

This plugin lets you style elements based on their parent container size, not the viewport. Useful for reusable components that need to adapt to their context.

Install it:

npm install @tailwindcss/container-queries

Add it to your CSS:

@import "tailwindcss";
@plugin "@tailwindcss/container-queries";

Use @container and @md: variants in your markup:

<div class="@container">
<div class="@md:text-lg">Responds to container width</div>
</div>

Tailgrids UI

Tailgrids is a React component library built on Tailwind CSS. It provides ready-to-use UI blocks such as navbars, cards, hero sections, and forms. Copy the component, paste it into your project, and customize with utility classes.

It works with any framework that supports Tailwind. No extra install needed beyond Tailwind itself.

shadcn/ui

shadcn/ui is a collection of accessible, unstyled components built with Tailwind CSS. You copy components directly into your project.

shadcn/ui supports both Radix UI and Base UI as the underlying primitive engine. You pick one when you initialize the project.

If you're starting a new project, Base UI is the modern choice. If you're on an existing Radix setup, stay on it unless you have a specific reason to switch.

Frequently Asked Questions

Do I still need tailwind.config.js in v4?

No. Tailwind CSS v4 follows a CSS-first configuration model. Themes, colors, spacing, and design tokens can be defined directly in your CSS using @theme.

tailwind.config.js is no longer created by default.

You can still use it for backward compatibility or specialized workflows, but most new projects won't need it.

What replaced create-react-app?

Vite. create-react-app is deprecated and no longer actively maintained.

For new React projects, use: npm create vite@latest

Vite delivers faster startup times and builds, and integrates cleanly with Tailwind CSS v4 via the dedicated Vite plugin.

What replaced Vue CLI?

Use: npm create vue@latest

This uses the official create-vue scaffolding workflow. Vue CLI (@vue/cli) is deprecated and should generally be avoided for new Vue projects.

Why are my Tailwind classes not applying after installation?

In most cases, the issue comes down to configuration. Start with these checks:

Verify that your stylesheet uses: @import "tailwindcss";

not the older v3 directives.

Confirm that your application's entry file imports that CSS file.

If you're using Vite, make sure @tailwindcss/vite is registered in vite.config.js.

These checks resolve the majority of setup-related issues.

Does Tailwind CSS v4 work with TypeScript?

Yes. The setup process is effectively the same. For React projects, use the react-ts Vite template. For Vue projects, enable TypeScript during the npm create vue@latest setup flow.

No additional Tailwind configuration is required for TypeScript support.

Can I use Tailwind CSS with both React and Vue in a monorepo?

Yes. Tailwind works with mixed-framework monorepos. Depending on your architecture, you can install Tailwind at the root level or per package.

Each application should maintain its own CSS entry file using: @import "tailwindcss";

Plugin execution remains isolated per application, whether you're using the Vite plugin or PostCSS integration.

Is Tailwind CSS v4 compatible with Node.js 18?

No. Tailwind CSS v4's Oxide engine requires Node.js 20 or newer. For long-term support environments, Node.js 22 LTS is the safer baseline. Before installing, check your runtime version: node -v

Conclusion

Tailwind CSS simplifies setup across modern frameworks and build tools while delivering significantly faster performance.

Despite differences between React, Next.js, Vue, Vite, Webpack, and Parcel workflows, three patterns stay consistent across almost every setup:

• Use @import "tailwindcss" in your CSS. The older three-directive syntax is gone in v4.
• Use @theme for themes, tokens, and custom design values, rather than relying on a default tailwind.config.js.
• Use Node.js 20+. Earlier runtimes are not supported by the Oxide engine.

Here's the recommended setup by environment:

• React: npm create vite@latest + @tailwindcss/vite
• Next.js: npx create-next-app@latest + @tailwindcss/postcss
• Vue 3: npm create vue@latest + @tailwindcss/vite
• Vite frameworks: npm create vite@latest + @tailwindcss/vite
• Webpack: @tailwindcss/webpack plugin (v4.2+)
• Parcel: @tailwindcss/postcss via .postcssrc

If you're building on top of Tailwind's ecosystem, tools like Tailgrids can accelerate development with reusable UI blocks designed specifically for Tailwind workflows.

The pattern stays the same: copy components, customize with utility classes, and integrate them into your existing stack.