1. 安装 unocss

npm i unocss -D

2. 配置、引入、使用

vite.config.ts 配置

import unocss from 'unocss/vite'
 
 plugins: [vue(), vueJsx(),unocss({
    rules:[
        
    ]
})],

main.ts 引入

import "uno.css"

2.1 配置静态 css

2.1.1 配置

plugins: [vue(), vueJsx(), unocss({
    rules: [
      ["bg-blue", {"background-color": "blue"}],
      ["white", {"color": "white"}]
    ]
})],

2.1.2 使用

<div class="white bg-blue" style="width: 100px; height: 100px">我是 div</div>

2.2 配置动态 css

2.2.1 配置

plugins: [vue(), vueJsx(), unocss({
    rules: [
      [/^p-(\d+)$/, ([, d]) => ({ padding: `${Number(d) * 10}px` })],
    ]
})],

2.2.2 使用

<div class="p-2" style="width: 100px; height: 100px">我是 div</div>

2.3 配置组合 css

2.3.1 配置

plugins: [vue(), vueJsx(), unocss({
    rules: [
      ["bg-blue", {"background-color": "blue"}],
      ["white", {"color": "white"}],
      [/^p-(\d+)$/, ([, d]) => ({ padding: `${Number(d) * 10}px` })],
    ],
    shortcuts: {
        head: "bg-blue white p-2"
    }
})],

2.3.2 使用

<div class="head" style="width: 100px; height: 100px">我是 div</div>

3. 预设

vite.config.ts 引入与配置

// 引入
import { presetIcons, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
  plugins: [vue(), vueJsx(), unocss({
    presets: [presetIcons(), presetAttributify(), presetUno()],  // 配置预设
    rules: [
      ["bg-blue", {"background-color": "blue"}],
      ["white", {"color": "white"}],
      [/^p-(\d+)$/, ([, d]) => ({ padding: `${Number(d) * 10}px` })],
    ],
    shortcuts: {
        head: "bg-blue white p-2"
    }
  })],
})

3.1 presetIcons 预设 icons

3.1.1 查看 icons 官网，选择一套 icons，比如选择 Google Material Icons

3.1.2 安装

可以看到，这套 icons 的后缀为 ic，安装的时候需要加上后缀

npm i -D @iconify-json/ic

3.1.3 使用

选中一个 icon，选择最后一个类名，可以直接复制，然后使用

<div class="i-ic-baseline-add-circle-outline">我是 div</div>

3.2 presetAttributify 类名属性化

可以直接将类名作为属性，不用写在 class 里面

<div bg-blue white p-1 style="width: 200px; height: 200px;">我是 div</div>

3.3 presetUno 集成原子化 css 框架

集成一系列流行的原子化 css 框架，包括 Tailwind CSS，Windi CSS，Bootstrap，Tachyons 等
例如，`ml-3`（Tailwind），`ms-2`（Bootstrap），`ma4`（Tachyons），`mt-10px`（Windi CSS）均会生效。

<div ml-3 ms-2 ma4 mt-10px style="width: 200px; height: 200px;">我是 div</div>

【Vue3】31-CSS 原子化