#UnoCSS

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.

#Installing UnoCSS

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

npm add unocss @unocss/postcss -D

yarn add unocss @unocss/postcss -D

pnpm add unocss @unocss/postcss -D

bun add unocss @unocss/postcss -D

deno add npm:unocss npm:@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.