←返回首页

Unocss / Tailwind CSS 完整速查指南

Vue、UnoCSS🔗 /tech/unocss-guide

Unocss / Tailwind CSS 完整速查指南

本指南基于 Tailwind CSS 编写，适用于 Unocss。旨在提供全面的常用及生僻 Class 速查与实战范例。

目录

  1. 布局 (Layout)
  2. Flexbox & Grid
  3. 间距 (Spacing)
  4. 尺寸 (Sizing)
  5. 排版 (Typography)
  6. 背景 (Backgrounds)
  7. 边框 (Borders)
  8. 效果 (Effects) & 滤镜 (Filters)
  9. 过渡与动画 (Transitions & Animation)
  10. 实战组件范例 (Examples)

一、 布局 (Layout)

Display & Position

ClassCSS说明
Display
blockdisplay: block;块级元素
inline-blockdisplay: inline-block;行内块级
inlinedisplay: inline;行内元素
flexdisplay: flex;弹性容器
griddisplay: grid;网格容器
hiddendisplay: none;隐藏元素
Position
staticposition: static;默认定位
relativeposition: relative;相对定位
absoluteposition: absolute;绝对定位
fixedposition: fixed;固定定位 (相对于视口)
stickyposition: sticky;粘性定位 (吸顶/吸底)

Top / Right / Bottom / Left / Z-Index

ClassCSS说明
inset-0top:0; right:0; bottom:0; left:0;占满容器
top-0, left-4top: 0px;, left: 1rem;距离定位
z-0 ~ z-50z-index: 0/10/20/30/40/50;层级 (可自定义如 z-100)
z-autoz-index: auto;自动层级

Overflow & Visibility

ClassCSS说明
overflow-autooverflow: auto;自动滚动条
overflow-hiddenoverflow: hidden;隐藏溢出
overflow-x-scrolloverflow-x: scroll;强制横向滚动
visible / invisiblevisibility: visible / hidden;可见性 (保留占位)

二、 Flexbox & Grid

Flex Direction & Wrap

ClassCSS说明
flex-rowflex-direction: row;水平排列 (默认)
flex-colflex-direction: column;垂直排列
flex-row-reverseflex-direction: row-reverse;水平反向
flex-wrapflex-wrap: wrap;允许换行
flex-nowrapflex-wrap: nowrap;禁止换行

Flex Grow / Shrink / Basis

ClassCSS说明
flex-1flex: 1 1 0%;自动填满剩余空间
flex-autoflex: 1 1 auto;根据内容自动伸缩
flex-noneflex: none;禁止伸缩 (常用于头部/侧边栏)
growflex-grow: 1;允许放大
shrink-0flex-shrink: 0;禁止缩小 (防止图片/图标被挤压)

Alignment (对齐)

ClassCSS说明
Justify Content (主轴)justify-content: ...
justify-startflex-start起始对齐
justify-centercenter居中
justify-endflex-end末尾对齐
justify-betweenspace-between两端对齐
justify-aroundspace-around环绕对齐
Align Items (交叉轴)align-items: ...
items-startflex-start顶部对齐
items-centercenter垂直居中
items-endflex-end底部对齐
items-stretchstretch拉伸填满 (默认)

Grid Layout

ClassCSS说明
grid-cols-1 ~ 12grid-template-columns: repeat(n, minmax(0, 1fr));定义列数
col-span-2grid-column: span 2 / span 2;跨列合并
col-start-1grid-column-start: 1;起始列位置
gap-4gap: 1rem;网格间距
gap-x-2 / gap-y-4column-gap / row-gap横向/纵向间距

三、 间距 (Spacing)

p (padding), m (margin) 后缀: t(top), r(right), b(bottom), l(left), x(left+right), y(top+bottom)

Class值 (rem / px)说明
p-00px无内边距
p-10.25rem / 4px微小间距
p-20.5rem / 8px小间距
p-41rem / 16px标准间距
px-61.5rem / 24px水平间距
py-102.5rem / 40px垂直间距
-m-2-0.5rem负边距 (常用)
mx-autoauto水平居中 (需配合定宽)
space-x-4子元素之间的水平间距 (加在父级)
space-y-2子元素之间的垂直间距 (加在父级)

四、 尺寸 (Sizing)

Width & Height

ClassCSS说明
w-0 ~ w-96固定宽度 (类似 Spacing 比例)
w-1/2, w-1/3width: 50%, 33.333%百分比宽度
w-fullwidth: 100%;占满父容器
w-screenwidth: 100vw;占满视口宽度
w-min / w-maxmin-content / max-content内容适应宽度
w-[100px]width: 100px;自定义数值 (JIT)
h-fullheight: 100%;占满父容器高度 (父容器需有高度)
h-screenheight: 100vh;占满视口高度

Min / Max Size

ClassCSS说明
max-w-xs ~ 7xlmax-width: ...限制最大宽 (rem)
max-w-fullmax-width: 100%;响应式图片常用
min-h-screenmin-height: 100vh;最小高度为屏幕高
min-w-0min-width: 0;修复 Flex 子项溢出问题

五、 排版 (Typography)

Font Size & Weight

ClassCSS说明
text-xs12px极小
text-sm14px小号 (常用正文)
text-base16px基准 (浏览器默认)
text-lg18px大号
text-xl ~ 9xl标题大小
font-thin100极细
font-normal400正常
font-medium500中等
font-bold700粗体
font-black900极粗

Color & Alignment & Decoration

Class说明
text-gray-500灰色文字
text-primary主题色 (若配置)
text-left / center / right / justify对齐方式
underline下划线
line-through删除线
no-underline无修饰
uppercase / lowercase / capitalize大写 / 小写 / 首字母大写
truncate单行溢出省略 (...)
line-clamp-2限制显示2行并省略 (需插件或原生支持)

Leading (Line Height) & Tracking (Letter Spacing)

ClassCSS说明
leading-none1无行高
leading-tight1.25紧凑
leading-normal1.5正常
leading-loose2宽松
tracking-tighter-0.05em紧缩字距
tracking-wide0.025em宽字距

六、 背景 (Backgrounds)

ClassCSS说明
bg-whitebackground-color: #fff;背景色
bg-opacity-50背景透明度
bg-coverbackground-size: cover;覆盖填充
bg-containbackground-size: contain;包含
bg-centerbackground-position: center;居中
bg-no-repeatbackground-repeat: no-repeat;不重复
Gradients
bg-gradient-to-rlinear-gradient(to right, ...)向右渐变
from-blue-500起始色
via-purple-500中间色 (可选)
to-pink-500结束色

七、 边框 (Borders)

Border Radius (圆角)

ClassCSS说明
rounded-none0px直角
rounded-sm2px小圆角
rounded4px标准圆角
rounded-md6px中圆角
rounded-lg8px大圆角
rounded-xl ~ 3xl超大圆角
rounded-full9999px胶囊/圆形

Border Width & Color

ClassCSS说明
borderborder-width: 1px;1px 边框 (默认)
border-0 / 2 / 4 / 8指定宽度
border-t-2仅顶部边框
border-red-500红色边框
border-dashedborder-style: dashed;虚线
divide-y子元素之间添加分隔线 (父级用)
divide-gray-200分隔线颜色

Ring (外发光/聚焦环)

Class说明
ring-2添加 2px 外环 (不占空间)
ring-offset-2外环偏移 2px
ring-blue-500外环颜色

八、 效果 (Effects) & 滤镜 (Filters)

ClassCSS说明
Shadow
shadow-sm小阴影
shadow默认阴影
shadow-lg大阴影
shadow-inner内阴影
shadow-none无阴影
Opacity
opacity-00全透明
opacity-1001不透明
Filters
blur-smfilter: blur(4px);模糊
grayscalefilter: grayscale(100%);灰度
backdrop-blur-md背景毛玻璃 (需背景半透明)
Mix Blend
mix-blend-multiply正片叠底
mix-blend-screen滤色

九、 过渡与动画 (Transitions & Animation)

Transitions (过渡)

ClassCSS说明
transitiontransition-property: ...开启默认属性过渡
transition-all所有属性过渡
transition-colors仅颜色过渡
duration-300300ms持续时间
delay-100100ms延迟
ease-in-out缓动函数

Animations (动画)

Class说明
animate-spin旋转 (Loading常用)
animate-ping扩散 (消息提醒点)
animate-pulse脉冲/呼吸 (骨架屏)
animate-bounce上下弹跳

十、 实战组件范例 (Examples)

1. 响应式卡片 (Card)

包含图片、标题、描述、标签和悬停效果。

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white hover:shadow-2xl transition-shadow duration-300">
  <!-- 图片区域 -->
  <img class="w-full h-48 object-cover" src="/img/card-top.jpg" alt="Sunset">
  
  <!-- 内容区域 -->
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800">The Coldest Sunset</div>
    <p class="text-gray-700 text-base line-clamp-3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! 
      Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  
  <!-- 标签区域 -->
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
  </div>
</div>

2. 导航栏布局 (Navbar)

Flex 布局，两端对齐，移动端适应。

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <!-- Logo -->
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  
  <!-- Menu Links -->
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
        Docs
      </a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
        Examples
      </a>
    </div>
    <!-- Button -->
    <div>
      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white transition mt-4 lg:mt-0">
        Download
      </a>
    </div>
  </div>
</nav>

3. 表单输入框 (Input Group)

带有 Ring 聚焦效果和标签。

<div class="mb-4">
  <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
    Username
  </label>
  <input 
    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition" 
    id="username" 
    type="text" 
    placeholder="Enter your username"
  >
</div>

4. 居中容器 (Centering)

最常用的水平垂直居中技巧。

<!-- Grid 方式 -->
<div class="grid place-items-center h-screen bg-gray-100">
  <div class="bg-white p-10 rounded shadow">Centered Content</div>
</div>

<!-- Flex 方式 -->
<div class="flex items-center justify-center h-screen bg-gray-100">
  <div class="bg-white p-10 rounded shadow">Centered Content</div>
</div>

5. 按钮变体 (Buttons)

<!-- 主按钮 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition">
  Button
</button>

<!-- 幽灵按钮 -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded transition">
  Button
</button>

<!-- 禁用状态 -->
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
  Disabled
</button>