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 @unocss/webpack.

Installing UnoCSS#

You need to install @unocss/webpack first.

npm add @unocss/webpack -D

Configuring plugin#

Register the UnoCSSRspackPlugin plugin in tools.rspack:

import { defineConfig } from '@rsbuild/core';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          // options
        }),
      ],
    },
  },
});

You can add UnoCSS Presets via the options of UnoCSSRspackPlugin, for example:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
import { presetAttributify } from '@unocss/preset-attributify';
import { presetUno } from '@unocss/preset-uno';

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          presets: [presetUno(), presetAttributify()],
        }),
      ],
    },
  },
});

Importing CSS#

In the JavaScript entry file, import uno.css:

import 'uno.css';

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.