UnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets.
You can integrate UnoCSS in Rsbuild via PostCSS plugins.
You need to install unocss
and @unocss/postcss
first.
You can register the unocss
PostCSS plugin through postcss.config.mjs or tools.postcss.
Rsbuild has integrated autoprefixer, so you only need to register the tailwindcss
plugin.
Create a uno.config.ts
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.
Add the @unocss
directives in your CSS entry file:
Depending on your needs, you can selectively import the CSS styles provided by UnoCSS. Please refer to the unocss documentation for detailed usage of the UnoCSS.
You have now completed all the steps to integrate UnoCSS in Rsbuild!
You can use UnoCSS's utility classes in any component or HTML, such as:
For more usage details, refer to the UnoCSS documentation.
UnoCSS provides a VSCode Extension plugin for VS Code to decoration and tooltip for matched utilities.
You can install this plugin in VS Code to enable more intelligent features.