构建含daisyUI的Tailwind CSS文件失败，组件缺失如何解决？

问题 #

尝试构建包含daisyUI的Tailwind CSS文件，步骤如下：

• 通过命令npm install tailwindcss@latest和npm install -D @tailwindcss/typography安装tailwindcss及@tailwindcss/typography插件；
• 通过npm i daisyui安装daisyUI；
• 手动创建tailwind.config.js文件，内容如下：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },

  plugins: [require("@tailwindcss/typography"), require(getDaisyUI())],

  daisyui: {
  styled: true,
  themes: true,
  base: true,
  utils: true,
  logs: true,
  rtl: false,
  prefix: "",
  darkTheme: "dark",
  },
}

function getDaisyUI() {
  return "daisyui";
}

• 执行命令npx tailwindcss -c tailwind.config.js -i ./static/src/style.css -o ./static/css/main.css构建main.css，命令输出显示已包含daisyUI组件，但提示未检测到工具类，需检查content配置；
• 检查生成的main.css文件，发现daisyUI组件缺失。

已尝试清理npm缓存、删除node_modules并重新安装所有依赖，问题仍存在，且构建过程无报错。请问如何构建包含daisyUI的CSS文件？

解决方案 #

1. 修复tailwind.config.js核心配置问题 #

你的配置存在两个关键问题：

• content为空数组：Tailwind依赖该配置扫描项目文件中的类名，空数组会导致Tailwind无法识别daisyUI的组件类，自然不会生成对应CSS；
• 插件引入冗余：无需自定义getDaisyUI函数，直接引入即可。

修改后的tailwind.config.js示例：

module.exports = {
  // 替换为项目中实际使用Tailwind/daisyUI类的文件路径，按需调整后缀和目录
  content: ["./static/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
  daisyui: {
    styled: true,
    themes: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
    prefix: "",
    darkTheme: "dark",
  },
}

2. 确认入口CSS文件包含基础指令 #

检查./static/src/style.css，必须包含以下Tailwind核心指令，否则无法生成基础样式和组件：

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

3. 重新构建CSS文件 #

执行原构建命令重新生成：

npx tailwindcss -c tailwind.config.js -i ./static/src/style.css -o ./static/css/main.css

额外排查点 #

• 版本兼容性：daisyUI v4需要Tailwind CSS v3.3及以上版本，若版本不兼容，执行升级命令：

npm install tailwindcss@latest daisyui@latest

• 路径校验：确认构建命令中-i（入口文件）和-o（输出文件）的路径拼写正确、文件存在。

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