个人实践-UnoCSS原子CSS入门-1

UnoCSS 原子 CSS 入门

目录

• UnoCSS 原子 CSS 入门
  • 什么是 UnoCSS
  • 引入
    • 项目引入实例
    • 通用引入方式
  • 使用
    • 基础写法
    • 间距
    • Flex 布局
    • 宽高
    • 颜色
    • 圆角和阴影
    • 自定义快捷类（Shortcuts）
    • 自定义规则
  • UnoCSS 与 Tailwind 对比
  • 官方文档

什么是 UnoCSS

UnoCSS 官方文档

UnoCSS 是一个即时生成（On-demand）的原子化 CSS 引擎，类似于 Tailwind CSS，但更加轻量、灵活和可扩展。

特点：

• 按需生成 CSS，最终体积非常小
• 规则可自定义
• 支持属性模式（Attributify）
• 支持图标、快捷类、预设扩展
• 与 Vue、Vite、Nuxt、React 等框架集成简单
• 编译速度非常快

引入

项目引入实例

入口链路：vite.config.ts 中 Vite 插件 UnoCSS()（未显式配置则自动读 uno.config.ts） → main.ts line 2 import '@/plugins/unocss' → src/plugins/unocss/index.ts 仅一行 import 'virtual:uno.css'，由 UnoCSS 的 Vite 插件在构建时按需生成原子类 CSS。

通用引入方式

Vue3 + Vite 项目：

npm install -D unocss

修改 vite.config.ts：

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

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

创建 uno.config.ts：

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
  ],
})

入口文件引入：

import 'uno.css'

使用

基础写法

类似 Tailwind：

<div class="text-red text-20 font-bold">
  Hello
</div>

生成：

color: red;
font-size: 20px;
font-weight: bold;

间距

<div class="m-4">margin</div>
<div class="p-2">padding</div>
<div class="mx-6">左右边距</div>
<div class="py-3">上下边距</div>

类名	含义
m-4	margin
p-4	padding
mt-4	margin-top
mb-4	margin-bottom
px-4	左右 padding
py-4	上下 padding

Flex 布局

<div class="flex items-center justify-between">
  <span>左边</span>
  <span>右边</span>
</div>

常用：

flex
flex-col
items-center
justify-center
justify-between
gap-4

宽高

<div class="w-200 h-100"></div>
<div class="w-full"></div>
<div class="h-screen"></div>

w-200 → width: 200px
h-100 → height: 100px

颜色

text-red
text-blue-500
bg-green
bg-gray-100
border-red

透明度：

bg-black/50
text-red/80

圆角和阴影

rounded
rounded-lg
rounded-full
shadow
shadow-lg

示例：

<div class="rounded-lg shadow p-4">
  卡片
</div>

自定义快捷类（Shortcuts）

export default defineConfig({
  shortcuts: {
    btn: 'px-4 py-2 rounded bg-blue text-white',
  },
})

使用：

<button class="btn">
  保存
</button>

自定义规则

rules: [
  [/^square-(\d+)$/, ([, d]) => ({
    width: `${d}px`,
    height: `${d}px`,
  })],
]

使用：

<div class="square-100"></div>

生成：

width: 100px;
height: 100px;

UnoCSS 与 Tailwind 对比

对比项	UnoCSS	Tailwind
编译速度	更快	较快
生成方式	即时生成	JIT
配置灵活性	非常高	较高
自定义规则	极强	一般
Attributify	原生支持	不支持
图标方案	内置	插件
学习成本	中等	较低
社区生态	较小	非常大

官方文档

• 官方
  • UnoCSS: The instant on-demand Atomic CSS engine
• 中文
  • UnoCSS 中文网
  • 指南
• UnoCSS Playground

如果你是 Vue3 + Vite 开发者，尤其是在后台管理系统、组件库、Agent 前端项目中，UnoCSS 目前是一个非常值得采用的方案。它与 Vue 的组合体验通常会比 Tailwind 更轻量，也更容易做项目级的样式抽象。