Vite+React项目中DaisyUI主题无法生效问题求助

你的问题出在DaisyUI的配置方式错误以及Tailwind CSS的引入写法不符合规范，按以下步骤修复：

1. 确认DaisyUI已安装 #

如果还未安装，执行以下命令：

npm install daisyui@latest

2. 创建/修改tailwind.config.js #

在项目根目录新建或编辑tailwind.config.js，将DaisyUI作为插件引入并配置主题：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "cupcake"], // 配置需要启用的主题，light为默认
  },
}

注：你之前在index.css里用@plugin配置主题的方式是错误的，DaisyUI的主题必须在tailwind.config.js中设置。

3. 修正index.css的内容 #

将src/index.css替换为标准的Tailwind CSS指令：

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

不需要使用@import "tailwindcss"或@plugin，这三个指令会自动加载Tailwind和DaisyUI的所有样式。

4. 测试验证 #

修改App.jsx添加DaisyUI组件测试样式：

function App() {
  return (
    <>
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
      {/* 测试DaisyUI按钮样式 */}
      <button className="btn btn-primary">测试按钮</button>
    </>
  )
}

export default App

重启Vite开发服务器（npm run dev），此时应该能看到DaisyUI的样式和主题正常生效。

内容的提问来源于stack exchange，提问作者nidhishree rao