你是否曾经为CSS命名而头疼？是否厌倦了在样式文件和组件之间来回切换？UnoCSS来了，它将彻底改变你写CSS的方式！
为什么选择UnoCSS？
UnoCSS是一个即时原子CSS引擎，它不像TailwindCSS那样预生成所有类，而是按需生成，这意味着：
- ⚡ 极致的性能：只生成你用到的样式
- 🎯 零配置起步：开箱即用，无需复杂配置
- 🧩 无限扩展：轻松创建自定义规则
- 📦 超小体积：最终打包的CSS文件极小
快速开始
安装UnoCSS
npm install -D unocss @unocss/preset-uno
配置Vite
// vite.config.ts
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'
export default defineConfig({
plugins: [UnoCSS()],
})
创建UnoCSS配置
// uno.config.ts
import { defineConfig, presetUno } from 'unocss'
export default defineConfig({
presets: [presetUno()],
})
引入样式文件
// main.ts
import 'uno.css'
常用示例清单（收藏级！）
尺寸系统
<!-- 宽度 -->
<div class="w-100px w-full w-100vw min-w-200px max-w-500px"></div>
<!-- 高度 -->
<div class="h-100vh h-50px min-h-200px max-h-500px"></div>
<!-- 宽高组合 -->
<div class="wh-100px"></div> <!-- width:100px; height:100px -->
间距系统
<!-- 内边距 -->
<div class="p-10px px-10px py-10px pt-10px pr-10px pb-10px pl-10px"></div>
<!-- 外边距 -->
<div class="m-10px mx-auto my-10px mt-10px mr-10px mb-10px ml-10px"></div>
<!-- 复合边距 -->
<div class="m-[10px_20px_30px_40px]"></div>
边框系统
<!-- 基础边框 -->
<div class="border-1px border-solid border-#ffffff"></div>
<!-- 方向控制 -->
<div class="border-t border-b-2px border-l-dashed border-r-dotted"></div>
<!-- 复合写法 -->
<div class="border-(2px_solid_#e5e7eb)"></div>
圆角系统
<div class="rounded-10px rounded-full rounded-tl-lg rounded-br-4px"></div>
<!-- 混合圆角 -->
<div class="rounded-(tl-3_br-4)"></div>
布局系统
<!-- Flex布局 -->
<div class="flex flex-col justify-center items-center gap-4">
<div class="flex-1">Item 1</div>
<div class="flex-none">Item 2</div>
</div>
<!-- Grid布局 -->
<div class="grid grid-cols-24 grid-rows-2 gap-4">
<div class="col-span-2 row-span-1"></div>
</div>
颜色系统
<!-- 背景色 -->
<div class="bg-#fff bg-gradient-to-r from-blue-500 to-purple-600"></div>
<!-- 文字颜色 -->
<div class="c-#fff text-#999 text-red-500/50"></div>
<!-- 边框颜色 -->
<div class="border-blue-400 border-opacity-50"></div>
文字系统
<div class="text-12px font-400 leading-20px">
<p class="text-left uppercase underline">文本样式</p>
<p class="whitespace-nowrap text-align-end">对齐方式</p>
</div>
效果系统
<!-- 阴影 -->
<div class="shadow-[10px_0_16px_0_rgba(0,0,0,0.06)]"></div>
<!-- 悬停效果 -->
<button class="hover:bg-#ccc hover:scale-105 transition-all"></button>
<!-- 聚焦效果 -->
<input class="focus:border-blue-500 focus:ring-2" />
定位系统
<div class="relative">
<div class="absolute top-0 right-0 bottom-0 left-0"></div>
<div class="fixed top-10 right-20 z-100"></div>
<div class="sticky top-0"></div>
</div>
溢出处理
<!-- 单行文本溢出 -->
<p class="whitespace-nowrap overflow-hidden text-ellipsis">
这是一段很长的文本内容会被截断显示...
</p>
<!-- 多行文本溢出 -->
<p class="line-clamp-2 overflow-hidden">
这是多行文本内容，超过两行会被截断显示...
</p>
<!-- 滚动控制 -->
<div class="overflow-x-hidden overflow-y-auto"></div>
高级功能
<!-- 暗黑模式 -->
<div class="dark:bg-gray-800 dark:text-white"></div>
<!-- 响应式设计 -->
<div class="sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4"></div>
<!-- 容器查询 -->
<div class="@container">
<div class="@sm:text-lg @md:text-xl"></div>
</div>
自定义规则（高级用法）
UnoCSS的真正强大之处在于可以轻松创建自定义规则：
// uno.config.ts
export default defineConfig({
rules: [
// 自定义边距规则
[/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
// 自定义flex居中
['flex-center', { display: 'flex', 'align-items': 'center', 'justify-content': 'center' }],
// 复杂自定义规则
[/^wh-(\d+)$/, ([, d]) => ({ width: `${d}px`, height: `${d}px` })],
],
shortcuts: {
// 快捷方式
'btn-primary': 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',
'card': 'p-6 bg-white rounded-lg shadow-md',
}
})
性能优化技巧
- 按需导入：UnoCSS天生按需生成，无需额外配置
- 预设选择：只引入需要的预设，减少不必要的样式
- 安全列表：对于动态生成的类名，使用安全列表确保样式被生成
- CDN运行时：对于简单项目，可以考虑使用CDN运行时模式
实战建议
- 团队规范：制定团队的UnoCSS使用规范，保持代码一致性
- 渐进式采用：可以在现有项目中逐步引入UnoCSS
- 编辑器插件：务必安装UnoCSS的编辑器插件，获得更好的开发体验
- 代码审查：定期审查UnoCSS的使用，避免滥用和重复定义
总结
UnoCSS不仅仅是一个CSS框架，它是一种全新的CSS编写思维方式。通过原子化的类名组合，你可以：
- 🚀 提升3倍以上的开发效率
- 📦 减少70%的CSS代码量
- 🎨 保持设计系统的一致性
- ⚡ 获得更好的性能表现
现在就开始使用UnoCSS，让你的前端开发体验达到新的高度！
提示：本文示例基于UnoCSS最新版本，具体语法可能随版本更新而变化，建议查阅官方文档获取最新信息。
