Rspack集成DaisyUI v5与TailwindCSS v4时预转换错误排查

问题根源 #

Can't resolve 'daisyui' 错误是因为PostCSS未正确注册DaisyUI插件，同时Rspack的CSS加载逻辑没有适配Tailwind和DaisyUI的依赖关系。以下是完整的可运行配置步骤：

1. 安装必要依赖 #

先确认所有依赖已安装：

npm install tailwindcss daisyui postcss autoprefixer postcss-loader css-loader style-loader --save-dev

2. 修正 PostCSS 配置 (postcss.config.mjs) #

替换原有配置，直接注册Tailwind、DaisyUI和Autoprefixer插件：

export default {
  plugins: {
    tailwindcss: {},
    daisyui: {},
    autoprefixer: {},
  },
};

注意：@tailwindcss/postcss 是旧版写法，当前Tailwind v3+直接使用tailwindcss即可，DaisyUI本身是PostCSS插件，必须显式声明。

3. 配置 Tailwind Config (tailwind.config.ts) #

在Tailwind配置中启用DaisyUI，并确保扫描项目所有组件文件：

import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
} satisfies Config;

4. 调整 RSBuild/Rspack 配置 #

推荐方案：使用 RSBuild 官方 Tailwind 插件

如果你用的是@rsbuild/core，直接使用官方插件可以省去手动配置CSS loader的麻烦：

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginTailwindcss } from '@rsbuild/plugin-tailwindcss';

export default defineConfig({
  plugins: [pluginReact(), pluginTailwindcss()],
});

RSBuild插件会自动处理CSS加载、PostCSS配置关联，无需手动维护rspack.config.ts中的CSS规则。

备选方案：手动配置 Rspack

如果需要自定义Rspack规则，确保CSS loader正确处理@import的依赖：

// rspack.config.ts
export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.module\.css$/, // 排除模块化CSS，避免干扰全局样式
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }, // 强制@import的文件经过postcss-loader处理
          },
          'postcss-loader',
        ],
      },
      // 可选：处理CSS Modules
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { modules: true, importLoaders: 1 },
          },
          'postcss-loader',
        ],
      },
    ],
  },
};

5. 验证全局样式文件 (app.css) #

确保全局样式文件中正确引入Tailwind和DaisyUI的顺序：

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "daisyui"; /* 必须放在Tailwind核心指令之后 */

排查要点 #

• 若仍提示找不到daisyui，删除node_modules和package-lock.json后重新执行npm install
• 确认tailwind.config.ts中content路径正确，否则Tailwind无法扫描到使用的类，样式不会生成
• 使用RSBuild时，不要同时手动维护rspack.config.ts，避免配置冲突

内容的提问来源于stack exchange，提问作者Ismael Álvarez