wuhuacong(伍華聰)的專欄

UnoCSS 是一個 即時原子化 CSS（Atomic CSS / Utility-first CSS）引擎，類似于 Tailwind CSS 或 Windi CSS，但更輕量、靈活、性能高。本篇隨筆結合項目代碼介紹在Vant4+Vue3+TypeScript的H5移動前端使用UnoCSS。

UnoCSS 它的核心理念是：

• 原子化 CSS：每一個 class 對應一條 CSS 規則，例如 p-4 就表示 padding: 1rem。

• 按需生成：只有在 HTML / JS / Vue / React / Svelte 中使用到的類，UnoCSS 才會生成對應的 CSS，避免冗余。

• 零配置可用：開箱即用，同時支持高度自定義。

• 極速編譯：使用靜態分析和即時生成技術，CSS 構建速度非常快。

官網介紹： https://unocss.dev

1、UnoCSS 核心概念

原子類（Atomic Class）
每個 class 對應一個 CSS 屬性，例如：

<div class="p-4 text-red-500 bg-gray-100"></div>

對應 CSS：

div { padding: 1rem; color: #f56565; background-color: #f7fafc; }

Preset（預設）

預定義的一套 class 規則，例如：

• presetWind3 → 類似 Tailwind 風格

• presetAttributify → 屬性化寫法 <div p="4" text="red-500"></div>

• presetIcons → 圖標類自動生成

Shortcuts（快捷類）

將多個 class 合并為一個，例如：

shortcuts: {
  btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}

變體（Variants）

前綴用于狀態或響應式：

• hover:bg-blue-500 → 懸停時背景藍色

• md:flex → 中屏及以上顯示 flex 布局

• dark:text-white → 暗黑模式下字體白色

UnoCSS = 原子化 + 按需生成 + 極速編譯 + 高度可定制的 CSS 工具庫

2、如何掌握UnoCSS

要熟練使用 UnoCSS，你需要掌握它背后的 原子化 CSS 規則和標識符。其實，UnoCSS 并沒有發明新的 CSS 屬性，它是把 CSS 屬性 + 值 + 狀態/變體 封裝成原子類（class），所以掌握 UnoCSS 的標識，核心就是理解 CSS 屬性、常用縮寫和變體。我給你總結一個體系：

核心 CSS 屬性標識（必會）

這些幾乎是每個 UnoCSS 項目都會用到的：

核心思路：屬性縮寫 + 數值/顏色/尺寸 + 狀態/變體

常用狀態 / 偽類變體

UnoCSS 可以直接在 class 前加狀態：

可以組合：hover:md:bg-red-500 → 在中屏及以上，鼠標懸停時背景紅色

屬性縮寫規則（UnoCSS vs Tailwind 很類似）

• 尺寸：w-24, h-32, min-w-full

• 間距：p-4, px-2, mt-1, my-6

• 字體：text-sm, font-bold, leading-6

• 顏色：text-red-500, bg-blue-200, border-gray-300

• 邊框：border, border-t, border-l-2, rounded, rounded-full

• 陰影/動畫：shadow, shadow-lg, animate-bounce

• 布局：flex, grid, justify-center, items-start, gap-4

• 定位：absolute, relative, top-4, left-0

高級標識（可選）

• 圖標：i-mdi-home（需要 presetIcons）

• 屬性風格：p="4" text="red-500"（需要 presetAttributify）

• 自定義規則 / shortcuts：

shortcuts: {
  btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}

使用：<button class="btn">點擊</button>

3、在Vite+Vue3+TS+Vant4的H5移動前端使用UnoCSS

在Vite的移動前端項目中使用UnoCSS，和其他的操作一樣，先安裝在項目依賴庫中

pnpm install -D unocss

一般我們還會同時使用它的預設圖標處理，因此增加多兩個類庫。

pnpm install -D @unocss/preset-icons @iconify-json

在 uno.config.ts 中配置 presetIcons 插件。圖標預設: https://unocss.dev/presets/icons

presetIcons({
  extraProperties: {'display': 'inline-block',
    'vertical-align': 'middle',
    // ...
  },
})

iconify 生態的圖標都可以使用，具體可以在這里查找 Iconify（https://icones.js.org/） - 本項目推薦圖標庫。它是統一的圖標框架，超過 150 多個圖標集，和 200,000 個開源矢量圖標，并且會定期更新圖標。您可以在 iconify 或者 icones 中看到所有的圖標集。

在VSCode下使用預設的圖標集合，如下所示。

在vite.config.ts 配置：

import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Unocss()
  ]
})

在 main.ts 中導入使用。

import 'virtual:uno.css'
import '@unocss/reset/tailwind-compat.css'

在界面代碼中class里面使用即可

<div class="p-4 text-red-500 bg-gray-100 rounded-lg">
  Hello UnoCSS
</div>

在你的 uno.config.ts 或 uno.config.js 中進行配置UnoCSS 即可。

import { defineConfig, presetUno } from 'unocss'
import { presetWind3 } from 'unocss/preset-wind3'

export default defineConfig({
  presets: [
    presetWind3 (),
    // ...其他 preset
  ],
})

一般來說會比這個更多一些內容。

而一般VSCode 安裝插件UnoCSS后，

VSCode里面都有智能提示的，方便使用的同時也有助于了解UnoCSS的具體語法細節，如下我的項目所示。

生成的H5端界面效果如下所示

消息詳細界面中，也是統一使用了這樣的樣式處理方式。

<template>
  <div class="scroll-container">
    <page-header @click="goback" />
    <div class="m-2 border border-gray-300 rounded-[12px]">
      <div class="m-2 mb-2 font-bold">
        {{ article.title }}
      </div>
      <div class="m-2 flex flex-row text-xs text-gray">
        <div class="flex-grow-1">
          時間:{{ format(article.edittime) }}
        </div>
        <div class="mr-2">
          類別:{{ article.category }}
        </div>
      </div>
      <div class="m-2 mb-4 mt-2">
        <span class="line-height-loose" v-html="article.content" />
      </div>

      <van-space direction="vertical" fill class="m-4 mb-10 mt-4">
        <van-button round type="default" block @click="goback">
          返回
        </van-button>
      </van-space>
    </div>
  </div>
</template>

 下面是一些使用UnoCSS來構建界面顯示的效果圖，供參考。

 掃碼進行了解 Vant4+Vue3+TypeScript 的移動前端。