Skip to Content

一、布局 (Layout)

这是构建页面骨架的基础。

功能常用类名说明
Displayblock, inline-block, inline, flex, grid, hidden控制元素的 display 属性。hidden (即 display: none;) 非常常用。
Positionstatic, relative, absolute, fixed, sticky控制元素的 position 属性。
定位top-0, left-0, right-0, bottom-0与 position 配合使用，设置元素位置。数值遵循比例尺。
全覆盖inset-0相当于 top-0 right-0 bottom-0 left-0，常用于创建蒙层。
Z-Indexz-0, z-10, z-20, z-30, z-40, z-50控制元素的堆叠顺序。数值越大，越靠前。

示例： 创建一个固定在顶部的导航栏

<nav class="fixed top-0 left-0 right-0 h-16 bg-white z-50">...</nav>

二、尺寸 (Sizing)

控制元素的宽度和高度。

功能常用类名说明
宽度 (Width)w-4, w-32, w-64, w-auto, w-full, w-screenw-full (100% 宽度) 和 w-screen (100% 视口宽度) 最常用。
w-1/2, w-1/3, w-2/3, w-1/4, …百分比宽度，用于栅格系统。
高度 (Height)h-4, h-32, h-64, h-auto, h-full, h-screenh-full 和 h-screen 最常用。
最大/最小尺寸max-w-*, min-w-*, max-h-*, min-h-*max-w-screen-lg 或 max-w-7xl 常用于限制内容区域的最大宽度，使其在超大屏幕上不会过宽。

示例： 创建一个居中且有最大宽度的内容容器

<div class="max-w-4xl mx-auto">
  <!-- mx-auto 会在后面讲到 -->
  ...内容...
</div>

三、边距 (Spacing)

这是 Tailwind 中使用频率最高的类别之一。

功能类名前缀示例说明
内边距 (Padding)p-*p-4四个方向
px-*px-6水平方向 (left & right)
py-*py-2垂直方向 (top & bottom)
pt-, pr-, pb-, pl-*pt-3单个方向 (top, right, bottom, left)
外边距 (Margin)m-*m-4四个方向
mx-*mx-auto水平方向。mx-auto 是水平居中块级元素的法宝！
my-*my-2垂直方向
mt-, mr-, mb-, ml-*mb-5单个方向
项目间距space-x-* , space-y-*space-y-4给除第一个子元素外的所有直接子元素添加 margin-left 或 margin-top，用于创建均匀的列表间距，非常方便。

示例： 一个带内边距和子元素间距的列表

<ul class="p-4 space-y-2 bg-gray-100">
  <!-- ul 有内边距，每个 li 之间有垂直间距 -->
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

四、排版 (Typography)

控制所有与文本相关的样式。

功能类名前缀示例
字体大小text-*text-sm, text-base (默认), text-lg, text-xl … text-9xl
字体粗细font-*font-light, font-normal, font-medium, font-bold, font-black
字体颜色text-*text-black, text-white, text-gray-500, text-blue-600
文本对齐text-*text-left, text-center, text-right, text-justify
行高leading-*leading-none, leading-tight, leading-normal, leading-loose
文本修饰underline, no-underline, line-through
文本溢出truncate单行文本溢出显示省略号 (…)
字母间距tracking-*tracking-wider

示例： 一个标准的文章标题和段落

<h1 class="text-3xl font-bold text-gray-900 mb-2">文章标题</h1>
<p class="text-base text-gray-600 leading-relaxed">这里是段落内容...</p>

五、Flexbox & Grid

用于构建现代、复杂的布局。

Flexbox

功能常用类名说明
启用 Flexflex将容器设置为 display: flex
方向flex-row, flex-col主轴方向（水平或垂直）
对齐 (交叉轴)items-start, items-center, items-enditems-center 最常用，用于垂直居中
对齐 (主轴)justify-start, justify-center, justify-end, justify-between, justify-aroundjustify-between 和 justify-center 最常用
换行flex-wrap, flex-nowrap, flex-wrap-reverse
间距gap-4, gap-x-2, gap-y-8在 flex/grid 项目之间创建均匀的间隙，比 space-* 更现代、更强大。
伸缩flex-1, flex-auto, flex-none, grow, shrink控制 flex 项目的伸缩行为。flex-1 (即 flex: 1 1 0%) 非常常用。

示例： 一个垂直居中的三栏布局

<div class="flex items-center justify-between gap-4">
  <div>左侧</div>
  <div>中间</div>
  <div>右侧</div>
</div>

Grid

功能常用类名说明
启用 Gridgrid将容器设置为 display: grid
定义列数grid-cols-1, grid-cols-2, grid-cols-3, …最常用的 grid 类，快速创建网格布局
定义行数grid-rows-1, grid-rows-2, …
跨列/跨行col-span-2, row-span-3让单个网格项目占据多列或多行
间距gap-4, gap-x-2, gap-y-8与 Flexbox 中的 gap 完全相同

示例： 一个响应式的照片墙

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <!-- 在小屏幕上是2列，中等屏幕及以上是4列 -->
  <img src="..." />
  <img src="..." />
  <img src="..." />
  <img src="..." />
</div>

六、背景、边框和效果

用于美化元素。

功能类名前缀示例说明
背景颜色bg-*bg-white, bg-gray-100, bg-blue-500颜色命名与 text-* 类似
边框圆角rounded-*rounded-sm, rounded, rounded-lg, rounded-fullrounded-full 用于创建圆形
边框宽度border, border-2, border-t-4border 默认是 1px。可以指定方向 t, r, b, l。
边框颜色border-*border-gray-300, border-transparent
阴影shadow-*shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl快速添加漂亮的阴影效果
不透明度opacity-*opacity-0, opacity-50, opacity-100控制元素及其子元素的不透明度

示例： 创建一个带有圆角、边框和阴影的卡片

<div class="bg-white p-6 rounded-lg border border-gray-200 shadow-md">
  ...卡片内容...
</div>

总结

掌握以上这些基础效用类，你就可以像搭乐高积木一样快速、自由地构建任何界面。

学习建议：

  1. 安装 VS Code 插件： 安装 “Tailwind CSS IntelliSense” 插件，它会自动提示类名、显示对应的 CSS，极大提高开发效率。
  2. 实践出真知： 打开 Tailwind Play (play.tailwindcss.com) 或者在你的项目中，尝试用这些类去复刻一个你喜欢的网站组件，比如按钮、导航栏、卡片等。
  3. 查阅文档： 遇到不确定的类，第一反应应该是去查阅 Tailwind CSS 的官方文档，它的文档做得非常出色，搜索功能强大。
Last updated on
Map