How to Install DaisyUI 5 with React + Vite (Fix @plugin Error of DaisyUI Latest Version)
In this video, I'll show you how to install DaisyUI 5 with React and Vite — and fix the common error you get when following the official docs.
⚠️ The Problem:
The official DaisyUI docs tell you to use:
@plugin "daisyui";
But this causes an error with @tailwindcss/vite:
"Unknown file extension .css" or "Can't resolve 'daisyui'"
✅ The Fix:
Replace that line with:
@import "daisyui/daisyui.css";
---
📋 Step-by-Step Installation:
1️⃣ Create a new React + Vite project
npm create vite@latest ./ -- --template react
2️⃣ Install Tailwind CSS and DaisyUI
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
3️⃣ Update vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [tailwindcss(), react()],
});
4️⃣ Update your CSS file (src/index.css or src/App.css)
❌ Don't use: @plugin "daisyui";
✅ Use instead: @import "daisyui/daisyui.css";
That's it! Now you can use all DaisyUI components in your React project.
#reactjs #daisyui #tailwindcss #vite #webdevelopment