UnoCSS示例
UnoCSS 类名规则
间距和布局
| UnoCSS 类名 | CSS 转换结果 | 说明 |
|---|---|---|
p-4 | padding: 1rem | 四周内边距 |
px-4 | padding-left: 1rem; padding-right: 1rem | 水平内边距 |
py-4 | padding-top: 1rem; padding-bottom: 1rem | 垂直内边距 |
m-4 | margin: 1rem | 四周外边距 |
mx-4 | margin-left: 1rem; margin-right: 1rem | 水平外边距 |
my-4 | margin-top: 1rem; margin-bottom: 1rem | 垂直外边距 |
space-x-4 | margin-left: 1rem (子元素) | 水平间距 |
space-y-4 | margin-top: 1rem (子元素) | 垂直间距 |
像素单位
| UnoCSS 类名 | CSS 转换结果 | 说明 |
|---|---|---|
w-1px | width: 1px | 1像素宽度 |
h-2px | height: 2px | 2像素高度 |
m-[10px] | margin: 10px | 10像素外边距（方括号语法） |
p-[20px] | padding: 20px | 20像素内边距（方括号语法） |
text-[16px] | font-size: 16px | 16像素字体大小（方括号语法） |
leading-[24px] | line-height: 24px | 24像素行高（方括号语法） |
rounded-[4px] | border-radius: 4px | 4像素圆角（方括号语法） |
border-[1px] | border-width: 1px | 1像素边框（方括号语法） |
尺寸
| UnoCSS 类名 | CSS 转换结果 | 说明 |
|---|---|---|
w-4 | width: 1rem | 宽度 |
h-4 | height: 1rem | 高度 |
min-w-4 | min-width: 1rem | 最小宽度 |
max-w-4 | max-width: 1rem | 最大宽度 |
w-full | width: 100% | 全宽 |
h-screen | height: 100vh | 视口高度 |
颜色
| UnoCSS 类名 | CSS 转换结果 | 说明 |
|---|---|---|
text-blue-500 | color: rgb(59, 130, 246) | 文本颜色 |
bg-blue-500 | background-color: rgb(59, 130, 246) | 背景颜色 |
border-blue-500 | border-color: rgb(59, 130, 246) | 边框颜色 |
text-opacity-50 | --un-text-opacity: 0.5 | 文本透明度 |
bg-opacity-50 | --un-bg-opacity: 0.5 | 背景透明度 |
字体和文本
| UnoCSS 类名 | CSS 转换结果 | 说明 |
|---|---|---|
text-sm | font-size: 0.875rem; line-height: 1.25rem | 字体大小 |
font-bold | font-weight: 700 | 字体粗细 |
text-center | text-align: center | 文本对齐 |
leading-6 | line-height: 1.5rem | 行高 |
tracking-wide | letter-spacing: 0.025em | 字间距 |
响应式设计
| UnoCSS 类名 | 应用条件 | 说明 |
|---|---|---|
sm:text-lg | @media (min-width: 640px) | 小屏幕 |
md:text-lg | @media (min-width: 768px) | 中等屏幕 |
lg:text-lg | @media (min-width: 1024px) | 大屏幕 |
xl:text-lg | @media (min-width: 1280px) | 超大屏幕 |
2xl:text-lg | @media (min-width: 1536px) | 2倍超大屏幕 |
伪类和状态
| UnoCSS 类名 | CSS 转换结果 | 说明 |
|---|---|---|
hover:bg-blue-600 | :hover { background-color: rgb(37, 99, 235) } | 悬停状态 |
focus:outline-none | :focus { outline: none } | 聚焦状态 |
active:scale-95 | :active { transform: scale(0.95) } | 激活状态 |
disabled:opacity-50 | :disabled { opacity: 0.5 } | 禁用状态 |
group-hover:text-blue-500 | .group:hover & { color: rgb(59, 130, 246) } | 组悬停 |
动画和过渡
| UnoCSS 类名 | CSS 转换结果 | 说明 |
|---|---|---|
transition-all | transition-property: all | 过渡属性 |
duration-200 | transition-duration: 200ms | 过渡时长 |
ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) | 过渡曲线 |
animate-spin | @keyframes spin { ... } | 旋转动画 |
animate-pulse | @keyframes pulse { ... } | 脉冲动画 |