Fixing "@tailwindcss/vite" ESM Error in Vite 6

When upgrading to Vite 6 and integrating TailwindCSS v4, you might encounter the frustrating error: Failed to resolve "@tailwindcss/vite". This package is ESM only but it was tried to load by require. This error stems from a module system incompatibility between your configuration and the modern ESM-only TailwindCSS package.

The Core Problem

Vite 6 and TailwindCSS v4 have fully embraced ECMAScript Modules (ESM), moving away from the older CommonJS (CJS) module system. When your Vite configuration file uses a .js extension without explicit ESM configuration, Vite attempts to load ESM-only packages using CommonJS require() syntax, which fails.

The error message specifically indicates that @tailwindcss/vite is an ESM-only package but was trying to be loaded through the CommonJS require function.

Solution 1: Rename Configuration File (Recommended)

The most straightforward fix is to change your Vite configuration file extension from .js to .mjs:

mv vite.config.js vite.config.mjs

This change explicitly tells Node.js to treat your configuration file as an ESM module, ensuring compatibility with ESM-only packages like @tailwindcss/vite.

Your updated vite.config.mjs should look like:

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  base: "/",
});

Solution 2: Set Package Type to Module

Alternatively, you can explicitly declare your project as an ESM module by adding the "type": "module" field to your package.json:

{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    // ... other scripts
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.9",
    // ... other dependencies
  }
}

This approach ensures all .js files in your project are treated as ESM modules by default.

Why This Works

Understanding Module Systems

• CommonJS (CJS): The older Node.js module system using require() and module.exports
• ES Modules (ESM): The modern standard using import and export statements

TailwindCSS v4 and many modern packages have transitioned to being ESM-only, as ESM offers better static analysis, tree-shaking capabilities, and is the JavaScript standard moving forward.

When you use a .js configuration file without explicit ESM declaration, Node.js defaults to CommonJS behavior, causing the incompatibility with ESM-only packages.

Migration Considerations

Legacy Codebases

If you're upgrading an older codebase with dependencies that still rely on CommonJS, carefully test after making these changes. Some older libraries might not be fully compatible with ESM environments.

For new projects, using ESM from the start is recommended. For existing projects, the .mjs approach allows you to gradually transition while maintaining compatibility with any remaining CommonJS components.

Verification

After applying either solution, run your development server to confirm the fix:

npm run dev

You should see Vite starting successfully without the ESM compatibility error, allowing you to use TailwindCSS v4 and DaisyUI seamlessly with Vite 6.

Both solutions effectively address the module system mismatch, with the file extension change being the most direct and commonly recommended approach for Vite configurations.