An Rsbuild plugin to integrate with Tailwind CSS V4.

Tailwind CSS v4 is able to remove unused CSS classes through the @tailwindcss/webpack plugin. It scans utilities based on @source directives (and falls back to **/* when none are defined), which can still be inaccurate or redundant when:

• Using multiple entries
• Using a Tailwind CSS-based component library

This plugin automatically wires @tailwindcss/webpack into Rspack and injects a virtual Tailwind utilities import for each JS/TS module, so Tailwind effectively gets a precise @source per module and generates CSS based on usage across all entries and shared components.

Install:

npm add tailwindcss rsbuild-plugin-tailwindcss@v4 -D

Add plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";

export default {
  plugins: [pluginTailwindCSS()],
};

Create a tailwind.config.js file at the root of the project:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    colors: {
      blue: "#1fb6ff",
      purple: "#7e5bef",
      pink: "#ff49db",
      orange: "#ff7849",
      green: "#13ce66",
      yellow: "#ffc82c",
      "gray-dark": "#273444",
      gray: "#8492a6",
      "gray-light": "#d3dce6",
    },
  },
};

This will be auto-loaded by Rsbuild and applied by rsbuild-plugin-tailwindcss.

This plugin automatically wires the official @tailwindcss/postcss plugin into Rsbuild's PostCSS pipeline, so Tailwind CSS directives like @apply, @variant, @utility, and @custom-variant work out of the box without extra configuration.

/* src/styles.css */
@import "tailwindcss/utilities" layer(utilities);

.btn {
  @apply px-4 py-2 rounded bg-blue text-white;
}

Tailwind CSS v4 also lets you define design tokens using the @theme directive in a CSS file.

Create a theme file, for example src/theme.css:

@import "tailwindcss/theme" layer(theme);

@theme {
  /* extend default theme variables */
  --color-brand-primary: #010203;
}

Then point the plugin to this file so it is imported before utilities:

// rsbuild.config.ts
import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";

export default {
  plugins: [
    pluginTailwindCSS({
      theme: "./src/theme.css",
    }),
  ],
};

Now you can use utilities generated from your custom theme variables, for example:

<div class="text-brand-primary">Hello</div>

• Type: string | undefined
• Default: tailwind.config.js

The path to custom Tailwind CSS configuration. Could be a relative path from the root of the project or an absolute path.

• Example:

// rsbuild.config.ts
import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";

export default {
  plugins: [
    pluginTailwindCSS({
      config: "./config/tailwind.config.js",
    }),
  ],
};

• Type: string | undefined
• Default: resolved path to tailwindcss/theme

The path to a CSS file that defines Tailwind theme variables using the @theme directive. This file is imported before Tailwind utilities so that any custom variables can generate additional utilities.

• Example:

// rsbuild.config.ts
import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";

export default {
  plugins: [
    pluginTailwindCSS({
      theme: "./src/theme.css",
    }),
  ],
};

/** src/theme.css */
@import "tailwindcss/theme" layer(theme);

@theme {
  --color-brand-theme: #010204;
}

Thanks to:

• Tailwind CSS V4 for the idea of purge CSS by module graph.

MIT.