UnoCSS / Tailwind CSS 类名速查文档

gogoing2026-06-08 10:05

基于项目中实际使用的类名，结合 Tailwind CSS 与 UnoCSS （preset-uno、preset-icons、transformerVariantGroup）官方文档整理。

若类名同时存在于 Tailwind 与 UnoCSS，以两者通用语义为准；若为 UnoCSS 扩展语法，会单独标注。

一、布局与定位（Layout & Positioning）

类名 作用描述 生成的核心 CSS
flex 开启 Flex 布局 display: flex;
flex-col 主轴方向为垂直（自上而下） flex-direction: column;
flex-1 占据剩余空间（不基于自身内容） flex: 1 1 0%;
grid 开启 Grid 布局 display: grid;
fixed 固定定位 position: fixed;
absolute 绝对定位 position: absolute;
relative 相对定位 position: relative;
top-0 顶部距离 0 top: 0px;
top-3 顶部距离 0.75rem（12px） top: 0.75rem;
top-4 顶部距离 1rem（16px） top: 1rem;
top-14 顶部距离 3.5rem（56px） top: 3.5rem;
right-5 右侧距离 1.25rem（20px） right: 1.25rem;
right-0 右侧距离 0 right: 0px;
left-1/2 左侧距离父容器 50% left: 50%;
bottom-1 底部距离 0.25rem（4px） bottom: 0.25rem;
z-50 层叠层级 50 z-index: 50;

二、Flexbox 对齐

类名 作用描述 生成的核心 CSS
items-center 交叉轴（纵轴）居中对齐 align-items: center;
justify-center 主轴居中对齐（项目中未显式写出，但 btn 快捷方式常包含） justify-content: center;

三、Grid 网格

类名 作用描述 生成的核心 CSS
grid-cols-2 两列等宽网格 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-5 五列等宽网格 grid-template-columns: repeat(5, minmax(0, 1fr));
gap-3 网格/弹性项间距 0.75rem（12px） gap: 0.75rem;
col-start-1 列起始线 1 grid-column-start: 1;
col-start-2 列起始线 2 grid-column-start: 2;
col-span-1 跨越 1 列 grid-column: span 1 / span 1;
col-span-4 跨越 4 列 grid-column: span 4 / span 4;
col-span-5 跨越 5 列 grid-column: span 5 / span 5;

四、间距（Spacing）

基于默认的 0.25rem = 1 单位 （即 4px）换算。

类名 作用描述 生成的核心 CSS
p-4 四边内边距 1rem（16px） padding: 1rem;
px-... 水平方向内边距（本项目未显式使用） ---
py-4 垂直方向内边距 1rem padding-top: 1rem; padding-bottom: 1rem;
py-10 垂直方向内边距 2.5rem（40px） padding-top: 2.5rem; padding-bottom: 2.5rem;
pt-6 顶部内边距 1.5rem（24px） padding-top: 1.5rem;
pt-10 顶部内边距 2.5rem（40px） padding-top: 2.5rem;
pb-3 底部内边距 0.75rem（12px） padding-bottom: 0.75rem;
pb-4 底部内边距 1rem（16px） padding-bottom: 1rem;
pb-6 底部内边距 1.5rem（24px） padding-bottom: 1.5rem;
pb-15 底部内边距 3.75rem（60px） padding-bottom: 3.75rem;
pl-4 左侧内边距 1rem（16px） padding-left: 1rem;
mx-auto 水平方向外边距自动（常用于居中） margin-left: auto; margin-right: auto;
my-4 垂直方向外边距 1rem margin-top: 1rem; margin-bottom: 1rem;
mt--80px 顶部外边距 -80px（任意负值写法） margin-top: -80px;

五、尺寸（Sizing）

类名 作用描述 生成的核心 CSS
w-full 宽度 100% width: 100%;
w-14 宽度 3.5rem（56px） width: 3.5rem;
w-20 宽度 5rem（80px） width: 5rem;
h-0 高度 0 height: 0;
h-full 高度 100% height: 100%;
h-[560px] 高度 560px（Tailwind 任意值 / UnoCSS 支持） height: 560px;
min-h-100vh 最小高度 100vh min-height: 100vh;
max-w-[1200px] 最大宽度 1200px（任意值） max-width: 1200px;

注意 ：Tailwind 原生使用 min-h-screen 表示 min-height: 100vh，而 min-h-100vh 是 UnoCSS 兼容并扩展的写法。

六、背景（Background）

类名 作用描述 生成的核心 CSS
bg-black 背景色纯黑 background-color: #000000;
bg-white 背景色纯白 background-color: #ffffff;
bg-gray-100 背景色 Gray 100（#f3f4f6） background-color: #f3f4f6;
bg-dark-100 深色主题色阶 100（来自 dark 预设） 视主题配置而定
bg-opacity-30 背景透明度 30% --un-bg-opacity: 0.3;
bg-cover 背景图铺满（保持比例裁剪） background-size: cover;
bg-center 背景图居中 background-position: center;

七、文字排版（Typography）

类名 作用描述 生成的核心 CSS
text-center 文字水平居中 text-align: center;
text-start 文字左对齐 / 起始方向对齐 text-align: start;
text-white 文字颜色纯白 color: #ffffff;
text-gray-200 Gray 200（#e5e7eb） color: #e5e7eb;
text-gray-300 Gray 300（#d1d5db） color: #d1d5db;
text-gray-500 Gray 500（#6b7280） color: #6b7280;
text-dark-300 深色主题文字色阶 300 视 dark 预设配置
text-2xl 字体大小 1.5rem（24px） font-size: 1.5rem;
text-3xl 字体大小 1.875rem（30px） font-size: 1.875rem;
text-xl 字体大小 1.25rem（20px） font-size: 1.25rem;
text-base 默认基准字号 1rem（16px） font-size: 1rem;
font-bold 字重 700（加粗） font-weight: 700;
leading-10 行高 2.5rem（40px） line-height: 2.5rem;
leading-20 行高 5rem（80px） line-height: 5rem;

八、边框（Borders）

类名 作用描述 生成的核心 CSS
border-r-1 右边框宽度 1px border-right-width: 1px;
border-r-gray-100 右边框颜色 Gray 100 border-right-color: #f3f4f6;

九、变换与特效（Transforms & Effects）

类名 作用描述 生成的核心 CSS
transform-translate-x--1/2 水平向左平移自身宽度的 50% transform: translateX(-50%);
shadow-lg 大阴影 box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

注意 ：在标准 Tailwind 中，-translate-x-1/2 更常见；transform-translate-x--1/2 是 UnoCSS 兼容支持的写法。

十、交互状态（Interactive States）

类名 作用描述 生成的核心 CSS
cursor-pointer 鼠标悬停时显示手型 cursor: pointer;
hover:text-white 鼠标悬停时文字变白 &:hover { color: #fff; }

十一、过渡与动画（Transitions & Animation）

类名 作用描述 生成的核心 CSS
transition-all 所有属性都参与过渡 transition-property: all;
duration-300 过渡持续时间 300ms transition-duration: 300ms;

十二、响应式前缀（Responsive Prefixes）

项目同时使用了 Tailwind 默认的 min-width 断点 与 UnoCSS/Windi 的 lt-（less than）max-width 断点 。

在 UnoCSS 的 preset-uno 中，lt-sm: 等价于 Tailwind 的 max-sm:。

前缀 断点条件 对应 CSS 媒体查询
sm: 屏幕宽度 ≥ 640px @media (min-width: 640px) { ... }
lg: 屏幕宽度 ≥ 1024px @media (min-width: 1024px) { ... }
xl: 屏幕宽度 ≥ 1280px @media (min-width: 1280px) { ... }
lt-sm: 屏幕宽度 < 640px（即 ≤ 639px） @media (max-width: 639px) { ... }
lt-lg: 屏幕宽度 < 1024px（即 ≤ 1023px） @media (max-width: 1023px) { ... }

使用示例

html 复制代码 
<!-- 移动端（<640px）时显示为块级，其余情况隐藏 -->
<div class="lt-sm:display-block display-none">...</div>

<!-- 桌面端（≥1024px）时文字左对齐，行高 40px；≥1280px 时行高 80px -->
<div class="lg:(leading-10 text-start) xl:(leading-20)">...</div>

十三、UnoCSS 特有语法与扩展

13.1 图标预设（preset-icons / i- 前缀）

通过 @iconify-json/* 提供的图标集合，以纯 CSS 方式渲染图标。

类名 图标来源 图标含义
i-ic-round-menu Material Icons (ic) Round 汉堡菜单（三道杠）
i-radix-icons:cross-2 Radix Icons (radix-icons) 叉号 / 关闭
i-mdi:arrow-right-thin Material Design Icons (mdi) 右箭头（细线版）

用法：i-<集合名>-<图标名> 或 i-<集合名>:<图标名>。

13.2 变体组（Variant Groups）

借助 transformerVariantGroup，可以把相同前缀的类名用括号简写：

html 复制代码 
<!-- 等价于 lt-sm:absolute lt-sm:top-14 lt-sm:right-0 ... -->
<div class="lt-sm:(absolute top-14 right-0 w-full flex-col)">

代码中实际出现的位置：

  • lt-sm:(bg-black h-full)
  • lt-sm:(absolute top-14 right-0 w-full flex-col)
  • lg:(leading-10 text-start)
  • xl:(leading-20)
  • lt-lg:(w-full)
  • lt-lg:(display-none)
  • lt-lg:(col-start-1 col-span-5)

13.3 伪元素前缀（after:）

UnoCSS 支持将任意类名作用于伪元素：

html 复制代码 
<!-- 展开后：after:absolute after:content-none after:bg-dark-100 ... -->
<div class="after:(absolute content-none bg-dark-100 h-1 w-20 bottom-1 left-1/2 transform-translate-x--1/2)">
类名 作用描述
after: 将后续类名作用于 ::after 伪元素
content-none content: none;（在伪元素中清除内容）

13.4 显示/隐藏别名

类名 作用描述 说明
display-none display: none; UnoCSS 支持；Tailwind 中原生写法为 hidden

十四、自定义类名（非框架预设）

以下类名在标准 Tailwind / UnoCSS 预设中不存在 ，由项目自身（组件库或 scoped style）定义：

类名 出现位置 说明
dot about.vue（时间轴项） 自定义时间轴圆点样式，通常在 <style scoped> 中定义了 ::before / ::after 圆环
bg about.vue（顶部大图） 自定义背景图容器，可能配合 backgroundImage 使用
value about.vue 自定义容器类，用于企业价值卡片
btn home.vue（注册按钮） 自定义按钮样式（可能在全局或组件库中定义）
mobile-hide layout.vue 自定义：在移动端视口下隐藏
mobile layout.vue 自定义：配合 display-none 实现移动端专属显示

十五、速查：代码中完整的类名清单（按文件归类）

Layout.vue

sql 复制代码 
flex, flex-col, min-h-100vh, fixed, top-0, w-full, z-50, transition-all, duration-300, h-0,
lt-sm:(bg-black h-full), bg-black, bg-opacity-30, shadow-lg, w-14, h-full, lt-sm:mx-auto,
display-none, text-gray-300, text-2xl, absolute, right-5, top-3, cursor-pointer, hover:text-white,
lt-sm:display-block, i-ic-round-menu, i-radix-icons:cross-2,
lt-sm:(absolute top-14 right-0 w-full flex-col), mobile-hide, mobile

About.vue

sql 复制代码 
bg-gray-100, flex-1, pb-15, bg, bg-cover, bg-center, w-full, h-[560px], mt--80px, value,
text-center, p-4, bg-white, text-3xl, pb-4, pt-6, mb-4, relative,
after:(absolute content-none bg-dark-100 h-1 w-20 bottom-1 left-1/2 transform-translate-x--1/2),
pb-3, text-base, grid, grid-cols-2, gap-3, text-center, my-4, absolute, left-1/2, top-4,
transform-translate-x--1/2, max-w-[1200px], lt-lg:(w-full), text-white, py-4,
after:(absolute content-none bg-gray-100 h-1 w-20 bottom-1 left-1/2 transform-translate-x--1/2),
text-gray-200, grid-cols-5, lg:(leading-10 text-start), xl:(leading-20), col-start-1, col-span-1,
border-r-1, border-r-gray-100, lt-lg:(display-none), dot, col-start-2, col-span-4, pl-4,
lt-lg:(col-start-1 col-span-5), pt-10

Home.vue

arduino 复制代码 
bg-gray-100, bg-white, text-center, py-10, sm:py-20, pb-4, font-bold, text-3xl, text-dark-300,
pb-6, text-xl, text-gray-500, mx-auto, btn, flex, items-center, i-mdi:arrow-right-thin

参考链接

相关推荐
2501_918126911 小时前
火柴人踢任意球
javascript·css·css3
晓得迷路了2 小时前
栗子前端技术周刊第 132 期 - date-fns 支持 Temporal、npm 攻击事件、VoidZero...
前端·javascript·css
佛山个人技术开发18 小时前
个人建站接单｜汽车汽配行业宽屏自适应官网模板 工厂企业定制建站源码
前端·css·前端框架·html·汽车·php
古怪今人1 天前
[前端]HTML盒模型与尺寸，标准文档流，块级元素、内联元素和行内块，CSS选择器
前端·css
希冀1231 天前
【CSS学习第八篇】
css·学习·tensorflow
用户059540174461 天前
用LangChain+Chroma实现RAG多轮对话记忆与自动化测试，把bug发现时间从2小时压缩到5分钟
前端·css
用户059540174461 天前
我把RAG对话记忆测试从手工用例改成ChromaDB自动化评估，Bug发现率翻了4倍
前端·css
码农君莫笑2 天前
深入理解 CSS Grid 布局：从入门到实战
前端·css
用户059540174462 天前
把Agent记忆测试从Mock换到真实Redis，漏测率从30%降到0
前端·css
热门推荐
01【AI】2026 年具身智能模型和世界模型总结022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03GitHub 镜像站点04Codex 下载安装指南：Windows 和 macOS 官方版下载05Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复06【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08CC-Switch 下载、安装与使用配置指南【2026.5.29】092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？10AI科技热点日报 | 2026年6月1日