Use Tailwind CSS#

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.

Installing Tailwind CSS#

Only tailwindcss needs to be installed, no other npm packages are needed.

npm add tailwindcss -D

Configuring PostCSS#

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

module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

Configuring Tailwind CSS#

Create a tailwind.config.js file in the root directory of your project and add the following content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Importing CSS#

Add the @tailwind directives in your CSS entry file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the @tailwind documentation for detailed usage of the @tailwind directives.

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.