#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.

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.