主题
为什么选择 UnoCSS？
UnoCSS 是一个即时按需的原子化 CSS 引擎，比 TailwindCSS 更快、更灵活。我们推荐在项目中使用 UnoCSS，特别是它的属性模式（Attributify Mode），可以让代码更加整洁可读。
核心优势
- ⚡ 极致性能：比 TailwindCSS 快 5 倍以上
- 📦 更小体积：只生成使用到的样式
- 🎨 属性模式：告别超长 class 字符串
- 🔌 图标集成：直接使用 100+ 图标库
- 🎯 高度可定制：Preset 架构，按需扩展
属性模式 vs 传统写法对比
TailwindCSS 传统写法
当使用 TailwindCSS 时，class 会变得很长很难读：
Traditional Tailwind
问题：
- 一眼望去全是 class，难以分辨哪些是布局、哪些是颜色
- 响应式、暗黑模式、悬浮态混杂在一起
- 代码审查和维护困难
UnoCSS 属性模式
同样的效果，使用 UnoCSS 属性模式：
UnoCSS Attributify
✨ 可读性提升
- 语义清晰：每个属性代表一类样式（布局、颜色、动画...）
- 分组直观：
bg="white dark:gray-800"一目了然 - 易于维护：修改时快速定位到对应属性
属性模式语法详解
基础用法
| 属性 | 等价 class | 说明 |
|---|---|---|
flex="~" | flex | ~ 表示启用该属性 |
flex="~ col" | flex flex-col | 组合多个值 |
flex="~ col gap-4" | flex flex-col gap-4 | 可组合任意值 |
grid="~ cols-3" | grid grid-cols-3 | 同理适用于 grid |
颜色与状态
html
响应式设计
html
常用属性速查
| 特性 | 说明 |
|---|---|
| flex=`~ col` | Flex 布局，竖向排列 |
| flex=`~ row wrap` | Flex 布局，横向换行 |
| items=`center` | align-items: center |
| justify=`between` | justify-content: space-between |
| gap=`4` | gap: 1rem (4 * 0.25rem) |
| p=`x-4 y-2` | padding: 0.5rem 1rem |
| m=`t-4 b-2` | margin-top: 1rem, margin-bottom: 0.5rem |
| w=`full md:1/2` | width: 100% / 50% (响应式) |
| h=`screen` | height: 100vh |
| rounded=`lg` | border-radius: 0.5rem |
| shadow=`md hover:lg` | 阴影，悬浮增强 |
| border=`~ gray-200` | border: 1px solid + 颜色 |
| transition=`all duration-300` | 过渡动画 |
图标使用
UnoCSS 内置了强大的图标支持，可以直接使用 100+ 图标库（Iconify 集合）。
基础用法
html
常用图标库
| 前缀 | 图标库 | 示例 |
|---|---|---|
i-fluent: | Fluent UI Icons | i-fluent:add-24-regular |
i-carbon: | Carbon Icons | i-carbon:home |
i-mdi: | Material Design Icons | i-mdi:account |
i-lucide: | Lucide Icons | i-lucide:settings |
i-tabler: | Tabler Icons | i-tabler:brand-github |
i-heroicons: | Heroicons | i-heroicons:check |
i-ph: | Phosphor Icons | i-ph:house-bold |
图标查询
访问 Icônes 网站查询所有可用图标，点击复制即可使用。
与传统 CSS 对比
让我们对比一个真实的卡片组件。使用 UnoCSS 属性模式：
- 无需写 style 块
- 暗黑模式用 dark: 前缀即可
- 响应式用 md:, lg: 前缀即可
对比总结
| 方面 | 传统 CSS | UnoCSS 属性模式 |
|---|---|---|
| 代码量 | 多（需要 CSS 文件） | 少（内联） |
| 暗黑模式 | 需额外编写 | dark: 前缀即可 |
| 响应式 | @media 查询 | md:, lg: 前缀 |
| 命名负担 | 需要起 class 名 | 无需命名 |
| 可维护性 | 需要来回切换文件 | 组件内一目了然 |
项目配置
UnoCSS 需要在 vite.config.ts 中配置，生成的项目已经预配置好了。如需自定义，可以修改 uno.config.ts：
uno.config.ts
工具链说明
关于 ESLint / Prettier
生成的项目只配置了基础的 ESLint，因为：
- Biome、oxlint、oxfmt 等新工具选项较多
- 不同团队偏好不同
- 我们希望保持生成代码的轻量级
如需更完善的代码规范配置，请根据团队需求自行添加。