前端CSS解决方案--UnoCSS每个前端人都经历过的一个痛处就是，在写页面ui样式时不停的在html文件（或代码区域）

场景：

每个前端人都经历过的一个痛处就是，在写页面ui样式时不停的在html文件（或代码区域）和css文件（或代码区域）之间来回切换，这种聚焦点分离让ui样式的开发有点点烦。原子化css正是这一痛处的有效的解决方案。

unocss特性

轻量化：UnoCSS的轻量化体现在其‌按需生成‌的核心机制上，与传统原子化CSS框架（如Tailwind）的全量生成模式形成鲜明对比。它通过即时扫描代码中的类名，仅生成实际使用的CSS规则，避免打包冗余样式‌.
按需生成：仅编译项目中使用的样式类，避免传统框架的全量CSS文件问题.
高度灵活：支持Tailwind/Windi/Bootstrap等多框架语法混用，可自定义规则匹配器.
零配置启动：开箱即用，Vite/Webpack等主流构建工具5分钟快速集成.
性能优化：通过字符串直接生成CSS，比PostCSS解析方案速度提升显著.

技术实现原理‌

‌零依赖架构‌
核心引擎压缩后仅约6KB，不依赖PostCSS等重型工具链，直接通过字符串匹配生成CSS‌
动态规则匹配‌
采用正则表达式和预设规则系统，运行时智能识别类名需求，例如/^m-(\d+)$/可动态生成margin: 8px等样式‌
开发模式优化‌
通过Mutation Observer监听DOM变化，仅在检测到新类名时生成对应CSS变量，避免开发环境下的样式表膨胀‌

性能指标

指标	UnoCSS 2.0	Tailwind CSS
构建速度	毫秒级	秒级
生产包体积	6KB	28KB+
10万类名项目重载	亚秒级	3-5秒
内存占用	降低60%	基准值
（数据来源：UnoCSS 2.0官方基准测试‌）

使用方法

‌1、Vite项目集成‌

‌安装依赖‌
```
npm install -D unocss
```

‌Vite配置‌
在vite.config.ts中引入插件：

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

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

‌创建配置文件--有需要自定义css类名等‌
根目录下新建unocss.config.ts，配置预设和转换器：

import { defineConfig, presetUno, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [presetUno(), presetAttributify()],
  shortcuts: { 'flex-center': 'flex justify-center items-center' }
})

‌引入样式‌
在入口文件（如main.ts）中添加：
```
import 'virtual:uno.css'
```

‌2、Webpack项目集成‌

‌安装依赖‌
```
npm install -D unocss @unocss/webpack
```

‌Webpack配置‌
修改webpack.config.js：

const UnoCSS = require('@unocss/webpack').default

module.exports = {
  plugins: [new UnoCSS()],
  optimization: { realContentHash: true }
}

‌配置文件--有需要的话‌
同Vite项目，可创建unocss.config.js，配置规则与预设：
```
javascriptCopy Code
module.exports = {
  presets: [require('@unocss/preset-uno')()]
}
```
‌引入样式‌
在入口JS文件中添加：
```
import 'uno.css'
```

语法-示例

‌边距+弹性盒布局

<div class="m-4 p-2">四周margin:1rem，padding:0.5rem</div> 
<div class="mt-10px mr-2">上边距10px，右边距0.5rem</div>
<div class="w-full h-300px">全屏宽 + 高度300px</div>

## 弹性布局
<div class="flex justify-center items-center">
  <div class="w-20 h-20 bg-blue-500"></div>
</div>

‌颜色与字体‌

‌文本颜色‌：
text-{color}-{shade}，如text-red-500（红色）、text-opacity-60（透明度60%）
‌背景色‌：
bg-{color}-{shade}，如bg-gray-100
‌字体大小‌：
text-<size>，如text-xl（1.25rem）或text-20px（固定像素）

‌边框与圆角‌

‌边框‌：
border-{width}、border-{color}，如border-2 border-red
‌圆角‌：
rounded-<size>或rounded-full（完全圆形）：
```
<div class="rounded-full h-20 bg-green"></div>
```

前端CSS解决方案--UnoCSS

场景：