close
  • English

      • Tailwind CSS plugin

      Source Code

      This plugin is based on @tailwindcss/webpack and is used to integrate Tailwind CSS v4 in Rsbuild.

      Compared with the @tailwindcss/postcss-based integration, this plugin does not run Tailwind CSS transforms through PostCSS, providing better build performance.

      Quick start

      Install plugin

      You can install the plugin using the following command:

      npm
      yarn
      pnpm
      bun
      deno
      npm add @rsbuild/plugin-tailwindcss tailwindcss -D
      Tip

      The Tailwind CSS plugin supports Rsbuild >= 2.0 and Tailwind CSS >= 4.0.

      Register plugin

      You can register the plugin in the rsbuild.config.ts file:

      rsbuild.config.ts
      import { pluginTailwindcss } from '@rsbuild/plugin-tailwindcss';

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

      Import CSS

      Add an @import to your CSS entry file that imports Tailwind CSS:

      src/index.css
      @import 'tailwindcss';

      Then import this CSS file in your JavaScript or TypeScript entry:

      src/index.ts
      import './index.css';

      Now you can use Tailwind's utility classes in your HTML or framework components:

      <h1 class="text-3xl font-bold underline">Hello world!</h1>
      Tip

      Tailwind CSS v4 is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. You need to place the @import 'tailwindcss'; statement at the beginning of a .css file. See Tailwind CSS - Compatibility for more details.

      Options

      optimize

      Enable Tailwind CSS's built-in Lightning CSS optimization.

      This overlaps with Rsbuild's built-in Lightning CSS optimization. It is recommended to enable this option only when Rsbuild's built-in Lightning CSS optimization is disabled.

      • Type:
      type Optimize =
  | boolean
  | {
      minify?: boolean;
    };
      • Default: false

      When optimize is false, Tailwind CSS still compiles Tailwind directives and generates utilities, but skips Tailwind's built-in Lightning CSS optimization step.

      rsbuild.config.ts
      pluginTailwindcss({
  optimize: true,
});

      If you want to enable Tailwind CSS's built-in optimization without enabling its minification, pass an object and omit minify or set it to false:

      rsbuild.config.ts
      pluginTailwindcss({
  optimize: {
    minify: false,
  },
});

      To explicitly enable Tailwind CSS's built-in minification:

      rsbuild.config.ts
      pluginTailwindcss({
  optimize: {
    minify: true,
  },
});
      Tip

      For most Rsbuild projects, keep optimize disabled and use Rsbuild's built-in Lightning CSS optimization. Enable this option when you have disabled Rsbuild's built-in Lightning CSS optimization and want Tailwind CSS to perform that optimization step instead.