Developers run into issues when setting up TailwindCSS with Vite, especially with the latest Tailwind v4 and its new plugin system.

Why This Error Happens

Problems are:

  • Using CommonJS (require) in vite.config.js instead of ESM (import)
  • Not adding the @tailwindcss/vite plugin in Vite config
  • Missing the Tailwind import in your main CSS file
  • Mismatched or outdated dependencies after upgrading Tailwind or Vite32

    Prerequisites

  • Node.js: v18+ recommended
  • Vite: v4+ (ESM support)
  • Tailwind CSS: v4+
  • @tailwindcss/vite: installed
  • Project uses ESM (“type”: “module” in package.json)
  • React, Vanilla JS, or other framework as needed

At‑a‑Glance Solution

TailwindCSS v4+ uses a new plugin (@tailwindcss/vite) and requires your Vite config and project to use ESM (ECMAScript Modules).
Install both Tailwind CSS and @tailwindcss/vite, update your vite.config.js to use import syntax, and import Tailwind in your CSS file using @import “tailwindcss”;

Step‑by‑Step Guide

Set up TailwindCSS with Vite in minutes just follow these steps to configure plugins, import styles, and get your dev server running.

Step 1: Create a Vite project (if you haven’t already)

npm create vite@latest my-tailwind-appcd my-tailwind-app

npm install

Step 2: Install TailwindCSS and the Vite plugin

npm install tailwindcss @tailwindcss/vite

Step 3: Update your Vite config to use ESM and add the plugin

// vite.config.js (or vite.config.ts)import { defineConfig } from ‘vite’;

import tailwindcss from ‘@tailwindcss/vite’;

 

export default defineConfig({

  plugins: [tailwindcss()],

});

// Use import, not require. This is crucial for ESM compatibility

Also Read: How Much Does It Cost to Hire Remote React Developers?

Step 4: Import TailwindCSS in your main CSS file

/* src/index.css or src/styles.css */

@import “tailwindcss”;

Step 5: Reference your CSS in your entry file or HTML For React

import ‘./index.css’; // or ‘./styles.css’

For Vanilla JS, ensure your HTML includes:

<link href=”/src/styles.css” rel=”stylesheet”>

Step 6: Start the Vite development server

npm run dev

Visit http:// localhost:5173 to see your app.

Full Working Example

// vite.config.jsimport { defineConfig } from ‘vite’;import tailwindcss from ‘@tailwindcss/vite’;

 

export default defineConfig({

  plugins: [tailwindcss()],

});

 

css

/* src/index.css */

@import “tailwindcss”;

 

tsx

// src/App.jsx (React)

import ‘./index.css’;

 

export default function App() {

  return (

    <h1 className=”text-3xl font-bold underline text-red-800″>

      eSparkBiz!

    </h1>

  );

}

# Terminal commands
npm create vite@latest my-tailwind-appcd my-tailwind-appnpm installnpm install tailwindcss @tailwindcss/vitenpm run dev

// Open http:// localhost:5173 and check for Tailwind styling.

Common Pitfalls & Troubleshooting

Pitfall

 Example

Fix
Using require in Vite config const tailwindcss = require(‘@tailwindcss/vite’) Use import tailwindcss from ‘@tailwindcss/vite’
Tailwind styles not applied No styling after setup Ensure @import “tailwindcss”; in your CSS file
“Failed to resolve @tailwindcss/vite” ESM error Error in terminal Use ESM syntax and set “type”: “module” in package.json3

Wrap‑Up & Next Steps

Following these steps ensures TailwindCSS v4+ works smoothly with Vite, leveraging the new plugin system and ESM compatibility. For more advanced configuration, consult the Tailwind CSS docs or Vite troubleshooting guide.
Explore custom themes, PostCSS plugins, or integrating with frameworks like React or Vue for further enhancements.