前端架构师 | 阅读时间：5分钟 | 点赞收藏不迷路

🎯 前言

还在为记不住CSS类名而烦恼吗？还在为小程序和Web界面样式不一致而头疼吗？今天给大家带来一份 Tailwind/Unocss 类名速查表，这可能是你见过最全、最实用的原子化CSS指南！不管你是开发微信小程序、H5页面还是PC端应用，这份指南都能让你效率翻倍！

---

📦 一、基础类（万丈高楼平地起）

类名	功能	常用示例	适用场景
w-	宽度控制	w-full w-[100px] w-1/2	响应式布局
h-	高度控制	h-6 h-[45px] h-screen	固定高度/全屏
p-	内边距	p-3 p-4	卡片内间距
m-	外边距	m-2 m-4	元素间间距
border	边框	border border-2	输入框、卡片
bg-	背景色	bg-white bg-blue-500	按钮、容器
text-	文字色	text-red-500 text-[#333]	文字样式
flex	弹性布局	flex	现代布局基础
grid	网格布局	grid grid-cols-3	复杂网格
rounded	圆角	rounded-xl rounded-full	头像、按钮

💡 小技巧：使用 [] 可以设置任意值，如 w-[123px] h-[45px]

---

🔄 二、Flex布局类（一网打尽）

2.1 容器属性

html

<!-- 经典垂直居中 -->
<div class="flex justify-center items-center h-screen">
  <div>我在中间！</div>
</div>

类名	功能	等效CSS
flex	启用flex	display: flex
flex-col	垂直排列	flex-direction: column
flex-row	水平排列	flex-direction: row
flex-wrap	允许换行	flex-wrap: wrap

2.2 对齐方式（面试常考！）

主轴对齐（justify-content）

类名	效果	视觉示意
justify-start	左对齐	←元素→
justify-center	居中	← 元素 →
justify-end	右对齐	← 元素→
justify-between	两端对齐	元素← →元素
justify-around	环绕对齐	←元素 元素→

交叉轴对齐（align-items）

类名	效果	适用场景
items-start	顶部对齐	表单标签
items-center	垂直居中	最常用
items-end	底部对齐	底部导航
items-stretch	拉伸填充	等高列

2.3 间距控制

html

<!-- 等间距按钮组 -->
<div class="flex gap-4">
  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
</div>

• gap-2 = 8px间距

• gap-4 = 16px间距

• gap-x- / gap-y- 分别控制横竖间距

---

📐 三、间距类（精准控制）

3.1 内边距（Padding） - "盒子内部的呼吸空间"

类名	方向	示例	实际值（16px基准）
p-1 ~ p-12	四边	p-4	四边16px
px-	水平	px-4	左右16px
py-	垂直	py-3	上下12px
pt-	上	pt-2	上8px
pr-	右	pr-6	右24px
pb-	下	pb-8	下32px
pl-	左	pl-4	左16px

3.2 外边距（Margin） - "盒子外部的安全距离"

类名	方向	记忆口诀	使用场景
mt-	上边距	"上"天	与上方元素间距
mr-	右边距	"右"手	与右侧元素间距
mb-	下边距	"下"面	最常用！ 与下方元素间距
ml-	左边距	"左"手	与左侧元素间距
mx-	水平	"横"向	左右同时设置
my-	垂直	"竖"向	上下同时设置

🚨 重要规则：相邻元素的 margin-top 和 margin-bottom 会折叠！

---

📝 四、文字类（告别font-size纠结）

4.1 字号系统（设计规范）

类名	rem	px	适用场景
text-xs	0.75rem	12px	辅助文字、标签
text-sm	0.875rem	14px	正文、表单提示
text-base	1rem	16px	默认正文
text-lg	1.125rem	18px	小标题
text-xl	1.25rem	20px	卡片标题
text-2xl ~ text-9xl	递增	递增	大标题

4.2 文字样式

html

<!-- 完美文字组合 -->
<p class="text-gray-800 text-lg font-medium leading-relaxed">
  这是一个完美的段落，行高适中，颜色舒适
</p>

类名	功能	可选值
font-	字重	thin normal medium semibold bold
leading-	行高	tight snug normal relaxed loose
text-	对齐	left center right justify
italic	斜体	-
underline	下划线	-
line-through	删除线	-

---

🎨 五、颜色类（设计师都夸你专业）

5.1 颜色系统

html

<!-- 渐变色按钮 - 高级感拉满！ -->
<button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
  立即购买
</button>

类名	功能	示例
bg-	背景色	bg-blue-500 bg-[#1a1a1a]
text-	文字色	text-gray-700
border-	边框色	border-red-300
from-/to-	渐变方向	from-blue-400 to-blue-600
via-	中间色	from-green-400 via-blue-500 to-purple-600

5.2 透明度控制

html

<!-- 半透明蒙层 -->
<div class="bg-black/50">半透明背景</div>
<div class="text-red-500/80">80%透明度的红色文字</div>

---

🌐 六、跨平台支持（一次学习，到处使用）

6.1 各平台兼容性

平台/框架	支持程度	推荐方案
微信小程序	✅ 完美	UnoCSS（体积小）
Uni-app	✅ 完美	UnoCSS/Tailwind
Vue 3	✅ 完美	Tailwind CSS
React	✅ 完美	Tailwind CSS
React Native	✅ 支持	NativeWind
Flutter	⚠️ 有限	需要包装

6.2 实战对比

html

<!-- Web Vue项目 -->
<div class="p-4 bg-white rounded-lg shadow-md">
  Web卡片
</div>

<!-- 微信小程序 -->
<view class="p-4 bg-white rounded-lg shadow-md">
  小程序卡片
</view>

<!-- React Native -->
<View className="p-4 bg-white rounded-lg shadow-md">
  App卡片
</View>

相同类名，不同平台，一致效果！

---

💼 七、实战案例

案例1：商品卡片（面试常考）

html

<div class="w-64 border rounded-xl overflow-hidden shadow-lg">
  <img src="product.jpg" class="w-full h-48 object-cover">
  <div class="p-4">
    <h3 class="text-lg font-bold truncate">商品标题很长很长很长很长</h3>
    <p class="text-gray-500 text-sm mt-1">商品描述信息</p>
    <div class="flex justify-between items-center mt-4">
      <span class="text-red-500 font-bold">¥199.00</span>
      <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
        加入购物车
      </button>
    </div>
  </div>
</div>

案例2：后台管理布局

html

<div class="flex h-screen">
  <!-- 侧边栏 -->
  <div class="w-64 bg-gray-800 text-white p-4">
    侧边导航
  </div>
  
  <!-- 主内容区 -->
  <div class="flex-1 flex flex-col">
    <!-- 顶部栏 -->
    <header class="h-16 border-b flex items-center justify-between px-6">
      顶部栏
    </header>
    
    <!-- 内容区 -->
    <main class="flex-1 overflow-auto p-6">
      主要内容
    </main>
  </div>
</div>

---

🚀 八、性能优化建议

1. PurgeCSS/Tree Shaking - 生产环境自动删除未使用的类

2. JIT模式 - 即时编译，开发体验飞起

3. CDN引入 - 小项目可用CDN，无需构建

4. 自定义配置 - 只启用需要的功能

javascript

// tailwind.config.js 优化配置
module.exports = {
  content: ['./src/**/*.{vue,js,ts}'], // 只扫描这些文件
  corePlugins: {
    float: false, // 关闭不用的功能
    clear: false,
  }
}

---

📚 九、学习资源

1. 官方文档

   • Tailwind CSS - 最全面的文档

   • UnoCSS - 中文友好

2. 在线工具

   • Tailwind Play - 在线编辑

   • UnoCSS Online - 即时预览

3. UI库

   • DaisyUI - Tailwind组件库

   • Headless UI - 无样式组件

---

🎖️ 十、总结

Tailwind/UnoCSS 三大优势：

1. 开发速度快 - 不用在CSS文件和HTML之间切换

2. 一致性高 - 设计系统约束，团队协作无忧

3. 维护简单 - 没有深层嵌套的CSS，没有命名冲突

适合人群：

• 追求开发效率的前端工程师

• 需要多端统一的团队

• 个人开发者和小型项目

不适合场景：

• 需要高度自定义动画的页面

• 老项目迁移成本高

• 设计师主导样式的项目

---

最后提醒：工具只是手段，设计思维才是核心。合理运用这些工具，才能写出既美观又高效的代码！

---

如果觉得有用，请点赞收藏！
关注我，获取更多前端干货！
有任何问题，评论区交流！

#前端开发 #TailwindCSS #UnoCSS #微信小程序 #CSS框架 #编程技巧