Use Tailwind CSS v4#

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

You can integrate Tailwind CSS in Rsbuild via PostCSS plugins.

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.

Installing Tailwind CSS#

Rsbuild has built-in support for PostCSS, you can install tailwindcss and @tailwindcss/postcss packages to integrate Tailwind CSS:

npm add tailwindcss @tailwindcss/postcss -D

Configuring PostCSS#

You can register the Tailwind CSS PostCSS plugin through postcss.config.cjs or tools.postcss.

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

Importing CSS#

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

@import 'tailwindcss';

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.