Pre-transform error DaisyUI v5 with TailwindCSS v4 using Rspack, PostCSS

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.

Configuration

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

And I discovered the location of the error

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

@import "tailwindcss";
@import "daisyui"; /* When I add this line, it doesn't work */

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

Pre-transform error: Can't resolve 'daisyui' in ...

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.

Updated (2025-03-01)

With the release of DaisyUI v5, the documentation has been updated and now includes the necessary installation steps for TailwindCSS v4.

How to install daisyUI as a Tailwind CSS plugin?

You need Node.js and Tailwind CSS installed.

1. Install daisyUI as a Node package:

   npm i -D daisyui@latest
   

2. Add daisyUI to app.css:

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

• Install daisyUI as a Tailwind plugin

Original (2025-02-15)

How to import plugins into TailwindCSS v4

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

app.css

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

The Pre-transform error: Can't resolve 'daisyui' in ... error message is generated by the @import, which cannot find the file or module to import for DaisyUI. And it is correct, as this is a special TailwindCSS plugin that can only be interpreted by TailwindCSS.

Install TailwindCSS with Rspack & React

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!