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.
