Use UnoCSS

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.

Installing UnoCSS

You need to install unocss and @unocss/postcss first.

npm
yarn
pnpm
bun
npm add unocss @unocss/postcss -D

Configuring PostCSS

You can register the unocss PostCSS plugin through postcss.config.mjs or tools.postcss.

postcss.config.mjs
import UnoCSS from '@unocss/postcss';

export default {
  plugins: [UnoCSS()],
};

Rsbuild has integrated autoprefixer, so you only need to register the UnoCSS plugin.

Configuring UnoCSS

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

uno.config.ts
import { defineConfig, presetUno } from 'unocss';

export default defineConfig({
  content: {
    filesystem: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  },
  presets: [presetUno()],
});
TIP

The above configuration is for reference only and can be modified to suit the needs of your project.

Importing CSS

Add the @unocss directives in your CSS entry file:

main.css
@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.

Done

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.

VS Code Extension

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.