前言：大致了解什么是 UnoCss

UnoCSS 是即時(shí)原子 CSS 引擎，其設(shè)計(jì)靈活且可擴(kuò)展。核心是不固定的，所有 CSS 工具都是通過預(yù)設(shè)提供的。
你可以通過在本地 配置文件 中提供規(guī)則來定義自定義 CSS 工具

// unocss.config.ts

export default defineConfig({
     rules: [
          // 將規(guī)則的第一個(gè)參數(shù)（我們稱之為匹配器）更改為 RegExp，將主體更改為函數(shù)，使規(guī)則動(dòng)態(tài)化
          [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
     ],
})

通過這樣做，現(xiàn)在你可以擁有任意外邊距工具，例如 m-1、m-100 或 m-52.43。再說一次，UnoCSS 僅在你使用它們時(shí)生成它們

// html

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

// css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

什么是預(yù)設(shè)

制定一些規(guī)則后，你可以將它們提取到預(yù)設(shè)中，并與其他人共享
可以查看 官方預(yù)設(shè) 和 社區(qū)預(yù)設(shè) 了解更多信息

// my-preset.ts 這是提取的預(yù)設(shè)文件

import { Preset } from 'unocss'

export const myPreset: Preset = {
    name: 'my-preset',
    rules: [
        [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
        [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
    ],
    variants: [/* ... */],
    shortcuts: [/* ... */],
  // ...
}

// unocss.config.ts 在配置文件中使用預(yù)設(shè)

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
    presets: [
        myPreset, // 提取出來的預(yù)設(shè)
    ],
})

安裝 UnoCss

pnpm add -D unocss
pnpm add  @unocss/eslint-plugin --save-dev

配置 unocss.config.ts

import {
    defineConfig,
    presetAttributify,
    presetMini,
    presetWind3,
    transformerDirectives,
    transformerVariantGroup,
} from 'unocss'

export default defineConfig({
    // 常見用例的預(yù)定義配置 (即：預(yù)設(shè)配置)
    presets: [
        presetMini({ dark: 'class' }),
        // https://unocss.dev/presets/attributify#properties-conflicts
        presetAttributify({ prefix: 'un-', prefixedOnly: true }),
        presetWind3(),
    ],

    // 轉(zhuǎn)換器
    transformers: [transformerDirectives(), transformerVariantGroup()],
    
    // 快捷方式可讓你將多個(gè)規(guī)則組合成一個(gè)簡寫
    shortcuts: {
        'wh-full': 'w-full h-full',
        'flex-ac': 'flex justify-around items-center',
        'flex-bc': 'flex justify-between items-center',
    },
    theme: {},
})

注意1：將 UnoCss 集成到 Vite 中

// vite.config.ts 

import UnoCSS from 'unocss/vite'

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

注意2：將 virtual:uno.css 添加到你的主入口中

// main.ts

import 'virtual:uno.css'

注意3：在 VSCode 中安裝 UnoCSS 插件

UnoCSS.png