Tailwind CSS v4 Third-Party Integration — Frameworks and Tooling

DodaTech Updated 2026-06-28 4 min read

In this tutorial, you will learn about Tailwind CSS v4 Third. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS v4 integrates with popular frameworks through the @tailwindcss/vite plugin for Vite-based projects, the Tailwind CLI for non-Vite projects, and framework-specific packages for Next.js, Remix, and Laravel.

What You'll Learn

You will learn how to set up Tailwind v4 with Vite, Next.js, Remix, Laravel, and plain HTML/CSS projects, and the recommended configuration for each.

Why It Matters

Correct integration ensures optimal build performance. DodaTech's projects use different setups: Vite for React apps, CLI for static sites, and Laravel Mix for PHP projects.

Real-World Use

Doda Browser's extension uses Vite + @tailwindcss/vite for HMR. DodaZIP's marketing site uses the Tailwind CLI for simple HTML builds.

flowchart LR
    A[Performance] --> B[Integration]
    B --> C[Vite]
    B --> D[Next.js]
    B --> E[Laravel]
    B --> F[CLI]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Vite Integration

npm install tailwindcss @tailwindcss/vite

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

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

/* src/index.css */
@import "tailwindcss";

Expected output: Tailwind v4 processes CSS through the @tailwindcss/vite plugin. HMR is instant. No PostCSS config needed.

Next.js Integration

npm install tailwindcss @tailwindcss/postcss

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // Enable Lightning CSS for Next.js (if available)
  },
}

module.exports = nextConfig

// postcss.config.mjs (for Next.js compatibility)
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

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

Expected output: Next.js projects use the @tailwindcss/postcss package for compatibility, while the CSS configuration is the same @import "tailwindcss".

Remix Integration

npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'

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

/* app/tailwind.css */
@import "tailwindcss";

Expected output: Remix v2 with Vite uses the @tailwindcss/vite plugin. Import the CSS file in the root route.

Laravel Integration

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    tailwindcss(),
  ],
})

/* resources/css/app.css */
@import "tailwindcss";

{{-- resources/views/layout.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100">
    @yield('content')
</body>
</html>

Expected output: Laravel projects use Vite with @tailwindcss/vite plugin. The @vite directive automatically handles CSS and JS.

Tailwind CLI (No Framework)

npm install -g @tailwindcss/cli

/* input.css */
@import "tailwindcss";

@theme {
  --color-brand: #7c3aed;
}

# Development
npx @tailwindcss/cli -i input.css -o output.css --watch

# Production
npx @tailwindcss/cli -i input.css -o output.css --minify

<!DOCTYPE html>
<html>
<head>
  <link href="output.css" rel="stylesheet">
</head>
<body class="bg-brand p-8">
  <h1 class="text-white text-3xl font-bold">Tailwind CLI Setup</h1>
</body>
</html>

Expected output: The CLI watches input.css and generates output.css. No build tools, no config files -- just CSS and HTML.

Astro Integration

npm install tailwindcss @tailwindcss/vite

// astro.config.mjs
import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite'

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

/* src/styles/global.css */
@import "tailwindcss";

Expected output: Astro with Vite uses @tailwindcss/vite. Import the CSS in the layout component.

Common Mistakes

1. Installing Wrong Package

npm install tailwindcss alone is not enough. Install @tailwindcss/vite or @tailwindcss/postcss depending on the framework.

2. PostCSS Config in Vite Projects

Vite projects with @tailwindcss/vite do not need postcss.config.js. Remove it to avoid confusion.

3. Forgetting @import in CSS

The @import "tailwindcss" statement is required. Without it, Tailwind utilities are not available.

4. Not Installing Peer Dependencies

Some framework integrations need specific versions. Check the Tailwind docs for peer dependency requirements.

5. Mixing v3 and v4 Packages

@tailwindcss/postcss v4 is not the same as tailwindcss v3's postcss plugin. Check package versions.

Practice Questions

What package does Vite-based projects use? @tailwindcss/vite. Import in vite.config.js as a plugin.
How do you set up Tailwind CLI for static sites? npx @tailwindcss/cli -i input.css -o output.css --watch for development.
What package does Next.js use? @tailwindcss/postcss for PostCSS compatibility in Next.js.
Do you need postcss.config.js with @tailwindcss/vite? No. The Vite plugin replaces the need for a separate PostCSS config.
What CSS import is required in all setups? @import "tailwindcss" in the main CSS file.

Challenge

Set up Tailwind v4 in 3 different project types: a Vite + React project, a static HTML project (CLI), and a Laravel project. Verify all produce working CSS with custom @theme tokens.

FAQ

Can I use Tailwind v4 with Webpack?

Use @tailwindcss/postcss in the PostCSS config. Webpack with PostCSS loader works similarly to v3.

Does Tailwind v4 work with Create React App?

CRA uses Webpack. Add @tailwindcss/postcss to the PostCSS config. Consider migrating to Vite for better performance.

Can I use Tailwind v4 with SvelteKit?

Yes. SvelteKit uses Vite. Add @tailwindcss/vite to the Vite config.

How do I integrate with Nuxt?

Use @nuxtjs/tailwindcss module once it supports v4, or add the @tailwindcss/vite plugin to the Nuxt Vite config.

Does Tailwind v4 work with older Node versions?

v4 requires Node 18+. Check the official docs for the minimum supported version.

Mini Project

Create a multi-framework integration test: a Vite + React app (component library), a static HTML site (CLI), and a Laravel project (Vite plugin). Share a common @theme configuration across all three.

What's Next

Now master the Plugin System in v4 for extending Tailwind with custom utilities, variants, and base styles.

← Previous Tailwind CSS v4 Performance — Lightning CSS and Build Optimization Next → Tailwind CSS v4 Plugin System — @plugin Directive and Custom Extensions

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Tailwind V4