常用工具类
Tailwind 工具类按用途分族，先掌握最高频的五族：间距——p/m + 方向 + 数字（数字 × 0.25rem，p-4=1rem），与 Bootstrap 语法几乎一致，可无缝迁移；尺寸——w-full w-1/2 h-screen max-w-md，支持分数和关键字；颜色——text-red-500 bg-gray-100，每色 11 档（50~950），数字越大越深。
布局是重点：flex 一秒变弹性盒，items-center justify-between gap-4 解决垂直居中、两端对齐、间隙三件套，比手写 CSS 快十倍；网格用 grid grid-cols-3 gap-2。字体：font-bold text-sm leading-relaxed。
记忆技巧：所有类名都是 CSS 属性的缩写——p=padding、m=margin、w=width、bg=background、border=border，认识英文缩写就能猜出类名。查文档建议直接用官网搜索框，比背表高效。
本节要点间距 p/m+方向+数字（×0.25rem）；颜色 text-/bg- + 色名 + 50~950 档；flex/grid 三件套解决布局；类名 = CSS 属性英文缩写。
代码
<!-- 间距：p/py/px/pt + 数字（1单位=0.25rem） -->
<div class="p-4 py-2 px-6">内边距</div>
<div class="m-2 mt-8 mb-0">外边距</div>
<!-- 尺寸：分数与关键字 -->
<div class="w-1/2 h-16 mx-auto max-w-md">半宽、居中、限宽</div>
<div class="w-full h-screen">全宽满屏</div>
<!-- 颜色：色名 + 50~950 档（越大越深） -->
<p class="text-red-500 font-bold">红色加粗文字</p>
<div class="bg-gray-100 border border-gray-300">浅灰背景带边框</div>
<!-- 布局：flex / grid 一秒成型 -->
<div class="flex items-center justify-between gap-4">
<span>左</span> <span>右</span> <!-- 垂直居中+两端对齐+间隙 -->
</div>
<div class="grid grid-cols-3 gap-2">
<div>1</div><div>2</div><div>3</div> <!-- 三列网格 -->
</div>
<!-- 字体 -->
<p class="text-sm leading-relaxed tracking-wide">小号、松行距</p>📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读