close
  • English

      • Tailwind CSS v4

      Tailwind CSS is a CSS framework and design system based on utility classes, which can quickly add common styles to components and supports flexible extension of theme styles.

      Choosing Tailwind CSS version

      This document introduces the integration of Tailwind CSS v4.

      Please note that Tailwind CSS v4 uses many modern CSS features, such as Cascade Layers, if your target browser does not support these features, please use Tailwind CSS v3 first, see Using Tailwind CSS v3 for more details.

      More information can be found in Tailwind CSS - Compatibility.

      Integrating Tailwind CSS

      Using the Rsbuild plugin

      We recommend using the @rsbuild/plugin-tailwindcss plugin to integrate Tailwind CSS in Rsbuild.

      The plugin is based on @tailwindcss/webpack and does not need to run Tailwind CSS transforms through @tailwindcss/postcss, providing better build performance.

      Install @rsbuild/plugin-tailwindcss and tailwindcss:

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

      Register the plugin in the rsbuild.config.ts file:

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

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

      See Tailwind CSS plugin documentation for more details.

      Using the PostCSS plugin

      Rsbuild has built-in support for PostCSS, so projects that already have a PostCSS setup can install tailwindcss and @tailwindcss/postcss to integrate Tailwind CSS:

      npm
      yarn
      pnpm
      bun
      deno
      npm add tailwindcss @tailwindcss/postcss -D

      You can register the Tailwind CSS PostCSS plugin through a PostCSS configuration file or tools.postcss.

      postcss.config.mjs
      export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

      Importing CSS

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

      src/index.css
      @import 'tailwindcss';
      Tip

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

      Done

      You have now completed all the steps to integrate Tailwind CSS in Rsbuild!

      You can use Tailwind's utility classes in any component or HTML, such as:

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

      For more usage details, refer to the Tailwind CSS documentation.

      VS Code extension

      Tailwind CSS provides a Tailwind CSS IntelliSense plugin for VS Code to automatically complete Tailwind CSS class names, CSS functions, and directives.

      You can install this plugin in VS Code to enable the autocompletion feature.