在Vite v6项目中配置DaisyUI v5 BETA时遇到解析错误

问题原因 #

Tailwind CSS v4 与 DaisyUI v5 Beta 的集成逻辑和旧版本不同，你当前通过 @import "daisyui"; 直接导入的方式已不再适用，导致Vite无法解析该模块路径。

解决方案步骤 #

1. 配置Tailwind启用DaisyUI插件 #

创建或修改项目根目录下的 tailwind.config.js（TypeScript项目用 tailwind.config.ts），添加DaisyUI插件：

/** @type {import('tailwindcss').Config} */
export default {
  // 确保content包含所有需要编译的文件路径
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  // 启用daisyui插件
  plugins: [require('daisyui')],
}

2. 修改样式文件导入 #

打开你的 style.css，移除多余的 @import "daisyui"; 语句，保留Tailwind的导入即可：

@import "tailwindcss";

也可以使用Tailwind官方推荐的指令写法（两者功能等效）：

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 清理依赖缓存并重新安装 #

执行以下命令清理旧依赖和缓存，确保版本匹配：

rm -rf node_modules package-lock.json
npm install

4. 重启Vite服务 #

重新启动开发服务：

npm run start

验证配置 #

启动后可添加一个DaisyUI组件（如 <button class="btn">测试按钮</button>），查看页面是否正确加载组件样式，确认问题解决。

内容的提问来源于stack exchange，提问作者Yusuf Ismail