rsbuild-plugin-tailwindcss

An Rsbuild plugin to integrate with Tailwind CSS V3.

Why?

Tailwind CSS is able to remove unused CSS classes through Content Configuration. However, its accuracy may be insufficient when:

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

This plugin uses the Rspack module graph to override the content configuration with imported modules, generating Tailwind CSS output based on usage.

Usage

Install:

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

Add plugin to your rsbuild.config.ts:

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

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

Custom Tailwind CSS Configuration

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.

[!NOTE]

You don't need to add content in the tailwind.config.js. rsbuild-plugin-tailwindcss will add the imported modules for you.

Custom PostCSS Options

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

export default {
  plugins: {
    cssnano: process.env["NODE_ENV"] === "production" ? {} : false,
  },
};

[!NOTE]

You don't need to add tailwindcss in the postcss.config.js. rsbuild-plugin-tailwindcss will add the plugin for you.

Or use the tools.postcss option in rsbuild.config.ts.

Options

config

• 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",
    }),
  ],
};

Credits

Thanks to:

• Tailwind CSS V4 for the idea of purge CSS by module graph.
• The purge-tailwind-plugin created by @hardfist for the implementation of the Rspack plugin.

License

MIT.