#UnoCSS

UnoCSS 是一个灵活可扩展的原子化的 CSS 引擎，所有 CSS 工具类都是通过 preset 提供的。

你可以通过 PostCSS 插件来在 Rsbuild 中接入 UnoCSS。

#安装 UnoCSS

首先，你需要安装 unocss 和 @unocss/postcss。

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

#配置 PostCSS

你可以通过 postcss.config.mjs 或 tools.postcss 来注册 unocss 的 PostCSS 插件。

import UnoCSS from '@unocss/postcss';

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

Rsbuild 默认使用 Lightning CSS 添加浏览器前缀，因此你只需要注册 UnoCSS 插件。

#配置 UnoCSS

在当前项目的根目录创建 uno.config.ts 文件，并添加以下内容：

import { defineConfig, presetUno } from 'unocss';

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

#引入 CSS

在 CSS 入口文件中添加 @unocss 指令：

@unocss preflights;
@unocss default;

根据需求不同，你可以选择性地导入 UnoCSS 提供的 CSS 样式。请参考 UnoCSS 文档 来了解 @unocss 指令的详细用法。

#完成

你已经完成了在 Rsbuild 中接入 UnoCSS 的全部步骤！

你可以在任意组件或 HTML 中使用 UnoCSS 的 utility classes，比如：

<h1 class="px-2 items-center justify-between">Hello world!</h1>

更多用法请参考 UnoCSS 文档。

#VS Code 插件

UnoCSS 提供了 VS Code 插件，用于在 VS Code 中提示 UnoCSS 的 utilities classes。

你可以在 VS Code 中安装该插件，即可开启更多智能化功能。