UnoCSS is the instant atomic CSS engine, which 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.
npm add unocss @unocss/postcss -D
You can register the unocss
PostCSS plugin through postcss.config.mjs or tools.postcss.
import UnoCSS from '@unocss/postcss';
export default {
plugins: [UnoCSS()],
};
Rsbuild has integrated autoprefixer, so you only need to register the UnoCSS
plugin.
Create a uno.config.ts
file in the root directory of your project and add the following content:
import { defineConfig, presetUno } from 'unocss';
export default defineConfig({
content: {
filesystem: ['./src/**/*.{html,js,ts,jsx,tsx}'],
},
presets: [presetUno()],
});
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:
@unocss preflights;
@unocss default;
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:
<h1 class="px-2 items-center justify-between">Hello world!</h1>
For more usage details, refer to the UnoCSS documentation.
UnoCSS provides a VS Code 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.