问题al Integrar daisyui con rspack，react，tailwind y打字稿tailwindv4

Question

Postcss.config.mjs：

export default { plugins: {"@tailwindcss/postcss": {},},};

rsbuild.config.ts

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

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

Rspack.config.ts

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader', 
        ],
      },
    ],
  },
};

在我的app.css文件中，我尝试导入tailwind和daisyui：

@import "tailwindcss";
/* @import "daisyui"; */

，无论如何，当我散布Daisyui线时，它不起作用。

我如何正确配置Rspack，以便Daisyui与Tailwind CSS配合使用？我需要在rspack.config.ts或postcss.config.mjs中添加任何特定配置吗？ 我将感谢任何工作设置的帮助或示例。 您正在将Rspack与React一起使用。

安装与rspack

-rspackdocs

tailwindcss v4的安装程序为Rspack推荐PostCSS插件。

安装带有rspack的tailwindcss -tailwindcss v4docs

Answer 1

如果您使用的是带有PostCSS的tailwindcs，则还需要使用postcss.

安装daisyui。

• 安装daisyuipostcss -daisyui v5docs

与VITE相比，使用PostCSS时，您可能会看到略有不同的安装步骤。我会详细解释：

依赖性
• npm install tailwindcss @tailwindcss/postcss postcss postcss-loader daisyui@beta

Rspack.config.ts

• export default defineConfig({
    // ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["postcss-loader"],
          type: "css",
        },
        // ...
      ],
    },
  }

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

app.css

@import "tailwindcss";
@plugin "daisyui";