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 add unocss @unocss/postcss -D

Configuring PostCSS#

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.

Configuring UnoCSS#

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()],
});

Importing CSS#

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.

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 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.