还在为CSS样式烦恼吗？UnoCSS的原子化类名让你告别重复劳动！下面是一份超实用的UnoCSS常用类名速查表，收藏这一篇就够了！
📊 UnoCSS常用类名速查表
| 类别 | 类名示例 | 说明 | 等效CSS |
|---|---|---|---|
| 宽度 | w-100px w-full w-100vw | 宽度控制 | width: 100px width: 100% width: 100vw |
| 高度 | h-100vh h-50px min-h-200px | 高度控制 | height: 100vh height: 50px min-height: 200px |
| 内边距 | p-10px px-10px py-10px pt-10 pr-10 pb-10 pl-10 | 内边距控制 | padding: 10px padding-left/right: 10px padding-top/bottom: 10px |
| 外边距 | m-10px mx-auto my-10 mt-10 mr-10 mb-10 ml-10 | 外边距控制 | margin: 10px margin-left/right: auto margin-top/bottom: 10px |
| 边框 | border-1px border-solid border-#ffffff border-t | 边框样式 | border-width: 1px border-style: solid border-color: #ffffff border-top: 1px solid |
| 圆角 | rounded-10px rounded-full rounded-tl-lg | 圆角控制 | border-radius: 10px border-radius: 9999px border-top-left-radius: 0.5rem |
| Flex布局 | flex flex-col justify-center items-center gap-4 | Flex布局 | display: flex flex-direction: column justify-content: center align-items: center gap: 1rem |
| Grid布局 | grid grid-cols-24 grid-rows-2 gap-4 | Grid布局 | display: grid grid-template-columns: repeat(24, minmax(0, 1fr)) grid-template-rows: repeat(2, minmax(0, 1fr)) gap: 1rem |
| 背景 | bg-#fff bg-gradient-to-r from-blue-500 to-purple-600 | 背景样式 | background-color: #fff background-image: linear-gradient(to right, ...) |
| 颜色 | c-#fff text-#999 | 颜色控制 | color: #fff color: #999 |
| 字体大小 | text-12px text-sm text-lg text-xl | 字体大小 | font-size: 12px font-size: 0.875rem font-size: 1.125rem font-size: 1.25rem |
| 字体粗细 | font-400 font-bold font-light | 字体粗细 | font-weight: 400 font-weight: 700 font-weight: 300 |
| 文字颜色 | text-#999 text-red-500 text-blue-500/50 | 文字颜色 | color: #999 color: #ef4444 color: rgba(59, 130, 246, 0.5) |
| 行高 | leading-20px leading-normal leading-relaxed | 行高控制 | line-height: 20px line-height: 1.5 line-height: 1.625 |
| 阴影 | shadow-[10px_0_16px_0_rgba(0,0,0,0.06)] shadow-lg | 阴影效果 | box-shadow: 10px 0 16px 0 rgba(0,0,0,0.06) box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) |
| 层级 | z-100 z-10 z-auto | 层级控制 | z-index: 100 z-index: 10 z-index: auto |
| 盒子模型 | box-border box-content | 盒子模型 | box-sizing: border-box box-sizing: content-box |
| 定位 | absolute top-0 right-0 bottom-0 left-0 fixed sticky | 定位控制 | position: absolute top: 0 right: 0 bottom: 0 left: 0 |
| 悬停效果 | hover:bg-#ccc hover:scale-105 hover:text-blue-500 | 悬停状态 | &:hover { background: #ccc } &:hover { transform: scale(1.05) } |
| 超出隐藏 | overflow-x-hidden overflow-y-auto overflow-hidden | 溢出控制 | overflow-x: hidden overflow-y: auto overflow: hidden |
| 文字换行 | whitespace-nowrap text-align-end text-center | 文字处理 | white-space: nowrap text-align: end text-align: center |
| 文本溢出 | whitespace-nowrap overflow-hidden text-ellipsis | 文本溢出 | white-space: nowrap overflow: hidden text-overflow: ellipsis |
| 响应式 | sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 | 响应式设计 | @media (min-width: 640px) { width: 100% } |
| 暗黑模式 | dark:bg-gray-800 dark:text-white | 暗黑模式 | @media (prefers-color-scheme: dark) { background: #1f2937 } |
| 过渡动画 | transition-all duration-300 ease-in-out | 动画效果 | transition: all 0.3s ease-in-out |
| 透明度 | opacity-50 opacity-100 | 透明度控制 | opacity: 0.5 opacity: 1 |
| 光标 | cursor-pointer cursor-not-allowed | 光标样式 | cursor: pointer cursor: not-allowed |
| 显示隐藏 | hidden block inline inline-block | 显示控制 | display: none display: block display: inline display: inline-block |
🚀 实用组合示例
按钮样式
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-all">
点击我
</button>
卡片组件
<div class="p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow">
<h3 class="text-xl font-bold text-gray-800">卡片标题</h3>
<p class="text-gray-600 mt-2">卡片内容描述...</p>
</div>
导航菜单
<nav class="flex gap-4 p-4 bg-gray-100">
<a class="px-3 py-2 text-blue-600 hover:bg-blue-100 rounded" href="#">首页</a>
<a class="px-3 py-2 text-gray-600 hover:bg-gray-100 rounded" href="#">关于</a>
</nav>
模态框
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-96">
<h2 class="text-lg font-bold mb-4">模态框标题</h2>
<p class="text-gray-600">模态框内容...</p>
</div>
</div>
💡 使用技巧
- 组合使用：多个类名可以组合使用，实现复杂样式
- 响应式前缀：使用
sm:、md:、lg:、xl:前缀实现响应式设计 - 状态前缀：使用
hover:、focus:、active:等前缀处理交互状态 - 暗黑模式：使用
dark:前缀支持暗黑模式 - 自定义值：使用方括号
[value]支持任意CSS值
🎯 为什么选择UnoCSS？
- 按需生成：只生成使用的样式，体积极小
- 零配置：开箱即用，无需复杂配置
- 高度可定制：轻松扩展自定义规则
- 性能优异：编译速度极快，开发体验流畅
这份速查表涵盖了UnoCSS最常用的类名，收藏起来随时查阅，让你的开发效率提升300%！
提示：UnoCSS支持无限扩展，你可以根据项目需求自定义规则和快捷方式，打造专属的原子CSS系统！
