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.
Since Rsbuild has built-in support for postcss
and autoprefixer
, you only need to install tailwindcss
and there is no need to install other npm packages:
You can register the tailwindcss
PostCSS plugin through postcss.config.cjs or tools.postcss.
Rsbuild has built-in autoprefixer, so you only need to register the tailwindcss
plugin.
Create a tailwind.config.js
file in the root directory of your project and add the following content:
The above configuration is for reference only and can be modified to suit the needs of your project. For example, non-TypeScript projects do not need to include ts and tsx files.
Add the @tailwind
directives in your CSS entry file:
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.
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:
For more usage details, refer to the Tailwind CSS documentation.
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.
When using Tailwind CSS, if the content
field in tailwind.config.js
is not correctly configured, this can lead to poor build performance and HMR performance. This is because Tailwind CSS internally matches files based on the glob defined in content
. The more files it matches, the greater the performance overhead.
Therefore, we recommend that you specify the paths to be scanned accurately to avoid unnecessary performance overhead. For example, only include HTML or JS files in the project source code that actually contain Tailwind class names, and avoid including irrelevant files or directories, especially the node_modules
directory.
Here is an bad example of scanning the node_modules
: