🎯 UnoCSS终极速查表：这些原子类让你开发效率翻倍！

还在为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>

💡 使用技巧

1. 组合使用：多个类名可以组合使用，实现复杂样式
2. 响应式前缀 ：使用sm:、md:、lg:、xl:前缀实现响应式设计
3. 状态前缀 ：使用hover:、focus:、active:等前缀处理交互状态
4. 暗黑模式 ：使用dark:前缀支持暗黑模式
5. 自定义值 ：使用方括号[value]支持任意CSS值

🎯 为什么选择UnoCSS？

• 按需生成：只生成使用的样式，体积极小
• 零配置：开箱即用，无需复杂配置
• 高度可定制：轻松扩展自定义规则
• 性能优异：编译速度极快，开发体验流畅

这份速查表涵盖了UnoCSS最常用的类名，收藏起来随时查阅，让你的开发效率提升300%！

提示：UnoCSS支持无限扩展，你可以根据项目需求自定义规则和快捷方式，打造专属的原子CSS系统！