I'm working on a project using Rspack, React, Tailwind CSS, and TypeScript. I'm having trouble integrating DaisyUI.

According to the official DaisyUI v5 documentation for Vite, you need to import DaisyUI in tailwind.config.ts and postcss.config.js, but I'm not sure how to adapt this for Rspack.

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', 
        ],
      },
    ],
  },
};

In my app.css file, I tried importing Tailwind and DaisyUI:

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

However, when I uncomment the DaisyUI line, it doesn't work.

How can I configure Rspack properly so that DaisyUI works with Tailwind CSS? Do I need to add any specific configurations in rspack.config.ts or postcss.config.mjs?

I would appreciate any help or examples of a working setup.

I'm working on a project using Rspack, React, Tailwind CSS, and TypeScript. I'm having trouble integrating DaisyUI.

According to the official DaisyUI v5 documentation for Vite, you need to import DaisyUI in tailwind.config.ts and postcss.config.js, but I'm not sure how to adapt this for Rspack.

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', 
        ],
      },
    ],
  },
};

In my app.css file, I tried importing Tailwind and DaisyUI:

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

However, when I uncomment the DaisyUI line, it doesn't work.

How can I configure Rspack properly so that DaisyUI works with Tailwind CSS? Do I need to add any specific configurations in rspack.config.ts or postcss.config.mjs?

I would appreciate any help or examples of a working setup.

• typescript
• tailwind-css
• daisyui
• rspack
• tailwind-plugin

1 Answer 1

TL;DR: Starting from v4, the @plugin CSS-first directive is available for installing TailwindCSS plugins.

You are using Rspack with React.

• Install React with Rspack - Rspack Docs

The installer for TailwindCSS v4 recommends the PostCSS plugin for Rspack.

• Install TailwindCSS with Rspack - TailwindCSS v4 Docs

If you are using TailwindCSS with PostCSS, you will also need to install DaisyUI with PostCSS.

• Install DaisyUI with PostCSS - DaisyUI v5 Docs

You might see slightly different installation steps when using PostCSS compared to Vite. I'll explain in detail:

Dependencies

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"; /* not @import */

Important! You only need to import TailwindCSS. All other plugins can be added using the @plugin directive!