Tailwind CSS 学习手册

一、Tailwind 核心思想

传统 CSS 写法

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background: red;
}

Tailwind 写法

<div class="flex items-center justify-between h-[44px] bg-red-500"></div>

Tailwind 优点

1. 不需要单独编写 CSS 文件
2. UI 开发速度大幅提升
3. 天然实现组件隔离
4. 彻底避免 CSS 样式冲突

二、布局（最常用）

class 类名	作用
flex	启用 flex 布局
flex-col	垂直方向的 flex 布局（列布局）
flex-1	占满父容器剩余空间
items-center	子元素垂直居中
items-start	子元素顶部对齐
items-end	子元素底部对齐
justify-center	子元素水平居中
justify-between	子元素两端对齐，中间间距自适应
justify-around	子元素平均分布，两侧留相等间距

示例

<div class="flex items-center justify-between"></div>

三、尺寸

class 类名	作用
w-full	宽度100%
h-full	高度100%
w-screen	宽度为屏幕可视宽度
h-screen	高度为屏幕可视高度
w-[自定义值]	自定义宽度，如 w-[100px]
h-[自定义值]	自定义高度，如 h-[44px]

示例

<div class="w-full h-[44px]"></div>

四、Spacing（间距）

Padding 内边距

class 类名	作用
p-4	上下左右均设置内边距
px-4	仅左右设置内边距
py-2	仅上下设置内边距
pt-4	仅顶部设置内边距
pb-4	仅底部设置内边距

示例

<div class="px-4 py-2"></div>

Margin 外边距

class 类名	作用
m-4	上下左右均设置外边距
mx-4	仅左右设置外边距
my-2	仅上下设置外边距
ml-4	仅左侧设置外边距
mr-4	仅右侧设置外边距

示例

<div class="ml-2"></div>

五、字体

字体大小

class 类名	对应像素
text-xs	12px
text-sm	14px
text-base	16px
text-lg	18px
text-xl	20px
text-[自定义值]	自定义字体大小，如 text-[16px]

基础示例

<h1 class="text-lg"></h1>

字体粗细

class 类名	字体粗细效果
font-light	细体
font-normal	正常字体
font-medium	中等粗细
font-semibold	半粗体
font-bold	粗体

组合示例

<h1 class="text-lg font-semibold"></h1>
<h1 class="text-[16px] font-semibold"></h1>

文字相关样式

1. 字体行距：leading-tight（紧凑）、leading-normal（正常）、leading-loose（宽松）
2. 字间距：tracking-tight（紧凑）、tracking-normal（正常）、tracking-wide（加宽）、tracking-widest（最宽）

六、文字颜色

class 类名	作用
text-white	文字白色
text-black	文字黑色
text-gray-500	文字灰色（500色阶）
text-red-500	文字红色（500色阶）
text-[自定义值]	自定义文字颜色，如 text-[#ff4d4f]

示例

<span class="text-white"></span>

七、背景颜色

class 类名	作用
bg-white	背景白色
bg-red-500	背景红色（500色阶）
bg-[自定义值]	自定义背景颜色，如 bg-[#ff4d4f]

示例

<div class="bg-[#ff4d4f]"></div>

八、边框

基础边框类

• border：启用基础边框
• border-2：设置边框宽度为2px（可自定义数字）
• border-gray-200：设置边框颜色为灰色200色阶

圆角类

• rounded：基础圆角
• rounded-lg：大圆角
• rounded-full：圆形圆角（全圆角）

九、Grid 布局

核心写法

通过grid-cols-N设置列数，结合响应式前缀实现不同屏幕下的列数适配，搭配gap-N设置网格间距。

示例

<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6"></div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"></div>

Tailwind 响应式断点（宽度单位：px）

前缀	最小宽度
sm	640
md	768
lg	1024
xl	1280
2xl	1536

十、状态样式

hover 悬停状态

写法：hover:基础属性

示例：

<button class="bg-red-500 hover:bg-red-600"></button>
<div class="hover:bg-gray-100">列表项</div>

效果：鼠标悬停时，元素样式发生对应变化（如上例按钮背景色变深）。

active 点击状态

写法：active:基础属性

示例：

<button class="bg-blue-500 active:bg-blue-700"></button>

效果：鼠标点击元素时，样式发生对应变化。

focus 聚焦状态

适用场景：输入框、按钮等可聚焦元素

写法：focus:基础属性

示例：

<input class="focus:outline-none focus:ring focus:ring-blue-300">
<input class="focus:ring-2 focus:ring-blue-500">
<button class="focus:ring-2 focus:ring-red-500"></button>

效果：元素获得焦点时，触发对应样式（如输入框去除默认外边框、显示自定义高亮环）。

十一、SVG 图标颜色（fill-current）

SVG 默认颜色不会继承父元素的文字颜色，需通过fill-current实现颜色继承。

示例

<svg class="w-5 h-5 text-red-500 fill-current"></svg>

React 写法

<svg className="w-5 h-5 text-gray-500 fill-current" />

作用：SVG 图标颜色 = 元素的 text 颜色。

十二、文本省略

truncate 单行省略

适用场景：超长单行文本

要求：必须为元素设置固定宽度

示例：

<div class="w-[200px] truncate">
  这是一个非常非常非常长的标题
</div>

效果：这是一个非常非常...

等价 CSS：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

line-clamp 多行省略

适用场景：超长多行文本

写法：line-clamp-N（N为显示的最大行数）

示例：

<p class="line-clamp-2">
  很长很长很长的文章内容
</p>

效果：文本最多显示2行，超出部分省略。

十三、列表相关样式

divide 列表分割线

作用：为列表自动生成分割线，最后一项不会多余边框，无需手动编写border。

写法：divide-方向 + divide-颜色

示例：

<div class="divide-y divide-gray-200">
  <div class="p-4">歌曲1</div>
  <div class="p-4">歌曲2</div>
  <div class="p-4">歌曲3</div>
</div>

效果：列表项之间显示灰色200色阶的水平分割线。

marker 列表符号样式

作用：自定义列表符号的颜色

写法：marker:文字颜色类

示例：

<ul class="marker:text-sky-400 list-disc pl-5"></ul>
<ul class="list-disc pl-5 marker:text-blue-400 space-y-2"></ul>

等价 CSS：li::marker

十四、间距相关高级用法

space 系列（子元素自动间距）

作用：为父元素下的子元素添加统一间距，无需为每个子元素单独设置margin。

写法：

• space-y-N：子元素垂直方向间距
• space-x-N：子元素水平方向间距

示例：

<div class="space-y-3">
  <p>1</p>
  <p>2</p>
</div>
<div class="flex space-x-4">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

等价逻辑：子元素之间自动添加对应方向的margin（如space-y-3等价于相邻p标签之间设置margin-top）。

十五、group 父控制子（核心高级用法）

基础用法

作用：鼠标悬停父元素时，控制子元素的样式/显隐，实现联动效果。

示例：

<div class="group flex items-center p-4 hover:bg-gray-100">
  <span class="flex-1">歌曲名称</span>
  <button class="opacity-0 group-hover:opacity-100">播放</button>
</div>

效果：鼠标悬停父级div时，原本透明的播放按钮变为显示状态。

命名 group（解决多group冲突）

适用场景：页面存在多个group时，避免样式冲突

写法：

1. 父元素：group/自定义名称，如 group/item、group/edit、group/card
2. 子元素：group-hover/自定义名称:属性，如 group-hover/item:visible

核心示例（列表项+操作按钮）

<ul>
  <li class="group/item hover:bg-slate-100">
    用户信息
    <a class="group/edit invisible group-hover/item:visible">Call</a>
  </li>
</ul>

逻辑：鼠标悬停li（group/item）时，原本隐藏的Call按钮变为显示状态。

嵌套 group 高级用法

作用：子元素自身作为group，实现二级hover联动（如按钮hover时，控制其内部元素样式）

完整示例：

<li class="group/item hover:bg-slate-100 flex items-center p-3">
  <div class="flex-1">
    <p className="font-semibold">姓名</p>
    <p className="text-gray-500 text-sm">职位</p>
  </div>
  <a
    class="group/edit invisible group-hover/item:visible
    flex items-center gap-1 hover:bg-slate-200 px-2 py-1 rounded"
    href="tel:手机号"
  >
    <span class="group-hover/edit:text-gray-700">Call</span>
    <svg class="transition group-hover/edit:translate-x-0.5"></svg>
  </a>
</li>

交互流程：

1. 悬停列表项（group/item）→ Call按钮从隐藏变为显示
2. 悬停Call按钮（group/edit）→ 按钮内文字变灰、SVG图标向右微移

React 真实项目写法

<li className="group/item hover:bg-slate-100 flex items-center p-3">
  <div className="flex-1">
    <p className="font-semibold">{person.name}</p>
    <p className="text-gray-500 text-sm">{person.title}</p>
  </div>
  <a
    className="group/edit invisible group-hover/item:visible
    flex items-center gap-1 hover:bg-slate-200 px-2 py-1 rounded"
    href={`tel:${person.phone}`}
  >
    <span className="group-hover/edit:text-gray-700">Call</span>
    <svg className="transition group-hover/edit:translate-x-0.5"></svg>
  </a>
</li>

group 技术核心与应用场景

核心技术点

1. group/名称：父级hover控制的命名标识
2. group/edit：子级hover控制的命名标识
3. group-hover/名称：指定对应group的hover触发
4. invisible/visible：元素的隐藏/显示控制

常见应用场景

1. 列表操作按钮：hover列表行，显示编辑/删除按钮（歌曲列表、文件列表、用户列表）
2. 表格hover操作：hover表格行，显示操作按钮
3. 卡片hover：hover卡片，显示详情按钮

核心总结

group 的本质是通过命名标识实现精准的hover状态控制，group/item 控制列表级联动，group/edit 控制按钮级二级联动。

十六、aspect-ratio（图片/元素比例）

作用：强制保持元素的宽高比例，无需手动设置宽高

常用示例：

<div class="aspect-square"></div>

效果：元素保持1:1的正方形比例，适配各类屏幕。

十七、ring 焦点高亮/柔和边框（核心高级用法）

核心说明

Tailwind 的 ring 本质是CSS box-shadow，并非传统border，因此不会影响元素布局，样式更柔和，是现代UI的首选。

ring 基础大小

class 类名	效果	等价 CSS 核心
ring-0	无高亮环	box-shadow: 0 0 0 0px
ring-1	1px 高亮环	box-shadow: 0 0 0 1px
ring-2	2px 高亮环	box-shadow: 0 0 0 2px
ring-4	4px 高亮环	box-shadow: 0 0 0 4px
ring-8	8px 高亮环	box-shadow: 0 0 0 8px

ring 颜色与透明度

写法：ring-颜色-色阶/透明度，如 ring-slate-900/5

解析：

• slate-900：Tailwind 内置颜色，接近深灰黑色
• /5：透明度为5%，等价于 rgba 中的 alpha 值（如 rgba(15,23,42,0.05)）

组合用法（最常用）

<div class="ring-1 ring-slate-900/5"></div>

等价 CSS：

box-shadow: 0 0 0 1px rgba(15,23,42,0.05);

效果：元素显示一圈非常淡的1px边框，视觉柔和。

Tailwind 透明度通用语法

颜色类均支持/透明度写法，适用于文字、背景、边框、ring等：

写法	含义
bg-black/50	黑色背景，50%透明度
text-white/70	白色文字，70%透明度
ring-slate-900/5	深灰色ring，5%透明度
border-gray-500/30	灰色边框，30%透明度

ring 常见应用场景

1. 卡片组件（官方推荐）

<div class="bg-white rounded-xl shadow ring-1 ring-slate-900/5 p-6">
  Card Content
</div>

效果：白色卡片，搭配阴影和淡边框，视觉更高级。

2. 输入框聚焦

<input class="border rounded focus:ring-2 focus:ring-blue-500">

效果：输入框默认有基础边框，聚焦时显示蓝色2px高亮环。

3. 按钮聚焦

<button class="focus:ring-2 focus:ring-blue-400"></button>

ring 与 border 对比

特性	border（传统边框）	ring（Tailwind 高亮环）
布局影响	占用元素盒模型，影响布局	基于box-shadow，不影响布局
视觉效果	边框较硬，UI质感一般	样式柔和，符合现代UI设计
灵活性	仅基础边框效果	支持多尺寸、透明度、聚焦联动

十八、backdrop-blur（毛玻璃效果）

适用场景：导航栏、弹窗遮罩等需要半透明模糊的元素

示例：

<div class="backdrop-blur bg-white/70"></div>

效果：元素背景为70%透明度的白色，同时带有毛玻璃模糊效果，底层内容会被柔和模糊。

十九、CSS 伪元素/伪类高级用法

first-line（首行样式）

作用：控制文本第一行的样式

示例：

<p class="first-line:uppercase first-line:tracking-widest">
  这是第一段文字，这是第一段文字，这是第一段文字，这是第一段文字。
</p>

效果 ：文本第一行字母大写、字间距最宽，等价 CSS：p::first-line。

first-letter（首字下沉）

作用：实现杂志式的首字下沉排版效果

示例：

<p class="first-letter:text-7xl first-letter:font-bold first-letter:float-left">
  这是一篇文章的开头，首字会被放大并下沉显示。
</p>

效果：文本第一个字放大为7xl、粗体，且向左浮动，实现下沉效果。

二十、高级选择器

peer（兄弟元素控制）

作用：一个元素的状态变化，控制其兄弟元素的样式

示例：

<input class="peer">
<p class="peer-invalid:visible">输入内容无效</p>

效果：当input输入内容无效（peer-invalid）时，原本隐藏的提示文字p变为显示状态。

has 选择器

作用：元素包含指定子元素/状态时，自身样式发生变化

写法：has-[:选择器/状态]

示例：

<div class="has-[:checked]:bg-indigo-50">
  <input type="checkbox">
  <span>勾选框</span>
</div>

效果：当div内的复选框被勾选（:checked）时，div的背景色变为靛蓝色50。

group-has 选择器

作用：group 父元素包含指定元素时，控制子元素样式

写法：group-has-[元素/类名]

示例：

<div class="group">
  <a href="#" class="group-has-[a]:block">链接</a>
  <span>内容</span>
</div>

效果 ：当group内包含a标签时，对应元素变为块级显示，等价 CSS：.group:has(a)。

任意选择器 []

作用：支持直接使用CSS选择器作为Tailwind的修饰符，实现自定义状态控制

示例：

<div class="group group-[.is-published]:block">
  已发布内容
</div>

效果：当group元素包含.is-published类时，元素变为块级显示。

nth 选择器

作用：选择指定位置的子元素，实现精准样式控制

示例：

<ul class="group-[:nth-of-type(3)_&]:block">
  <li>第1项</li>
  <li>第2项</li>
  <li>第3项</li>
</ul>

效果：列表中第3个li元素变为块级显示。

* 子元素选择器

作用 ：为父元素下的所有子元素统一设置样式，无需逐个添加

写法：*:样式类

示例：

<ul class="*:rounded-full *:border *:bg-blue-50">
  <li>项1</li>
  <li>项2</li>
  <li>项3</li>
</ul>

效果：ul下的所有li元素都将拥有圆形圆角、边框、蓝色50背景。

二十一、响应式通用写法

核心规则

所有Tailwind样式类，均可添加响应式 断点 前缀 ，实现不同屏幕尺寸下的样式适配，遵循移动优先原则（无前缀为移动端默认样式，前缀为对应屏幕最小宽度以上的样式）。

写法示例

<p class="text-sm md:text-lg lg:text-xl">响应式文字</p>

效果：

• 屏幕宽度<768px（移动端）：文字大小14px（text-sm）
• 768px≤屏幕宽度<1024px（md）：文字大小18px（text-lg）
• 屏幕宽度≥1024px（lg）：文字大小20px（text-xl）

二十二、实战示例

移动端导航栏

<nav class="flex items-center justify-between h-[44px] px-4 bg-red-500 text-white"></nav>

页面整体布局（占满屏幕）

<div class="flex flex-col h-screen">
  <!-- 头部 -->
  <!-- 主体 -->
  <!-- 底部 -->
</div>

React 音乐列表（综合用法）

<div className="divide-y divide-gray-200">
  <div className="group flex items-center p-4 hover:bg-gray-100">
    <span className="flex-1 truncate font-semibold">
      周杰伦 - 不能说的秘密
    </span>
    <button className="opacity-0 group-hover:opacity-100 text-red-500">
      播放
    </button>
  </div>
</div>

综合技术点：

1. divide-y：列表项水平分割线
2. group + group-hover：悬停行显示播放按钮
3. truncate：歌曲名超长单行省略
4. font-semibold：歌曲名半粗体
5. flex-1：歌曲名占满剩余空间

二十三、Tailwind 记忆口诀

1. flex → 布局核心
2. p / m → 间距（内边距/外边距）
3. text → 字体相关（大小、粗细、颜色）
4. bg → 背景颜色
5. border → 传统边框
6. divide → 列表分割线
7. group → 父元素控制子元素
8. truncate → 文本单行省略
9. hover → 悬停状态（focus/active同理）
10. space → 子元素自动间距

二十四、推荐 VSCode 插件

插件名称

Tailwind CSS IntelliSense

核心功能

1. 样式类自动补全，提升开发效率
2. 实时显示class类名的作用提示
3. 检测无效的Tailwind类名并给出错误提示

二十五、Tailwind 修饰符速查表（Modifier → 对应CSS）

Modifier 修饰符	对应 CSS 伪类/伪元素
hover	&:hover
focus	&:focus
focus-within	&:focus-within
focus-visible	&:focus-visible
active	&:active
visited	&:visited
target	&:target
has	&:has
first	&:first-child
last	&:last-child
only	&:only-child
odd	&:nth-child(odd)
even	&:nth-child(even)
first-of-type	&:first-of-type
last-of-type	&:last-of-type
only-of-type	&:only-of-type
empty	&:empty
disabled	&:disabled
enabled	&:enabled
checked	&:checked
indeterminate	&:indeterminate
default	&:default
required	&:required
valid	&:valid
invalid	&:invalid
in-range	&:in-range
out-of-range	&:out-of-range
placeholder-shown	&:placeholder-shown
autofill	&:autofill
read-only	&:read-only
before	&::before
after	&::after
first-letter	&::first-letter
marker	&::marker
selection	&::selection
file	&::file-selector-button
backdrop	&::backdrop
placeholder	&::placeholder
2xl	@media (min-width: 1536px)
min-[...]	@media (min-width: 自定义值)
max-md	@media not all and (min-width: 768px)
max-[...]	@media (max-width: 自定义值)
portrait	@media (orientation: portrait)
motion-reduce	@media (prefers-reduced-motion: reduce)
contrast-more	@media (prefers-contrast: more)
contrast-less	@media (prefers-contrast: less)
print	@media print
aria-checked	&[aria-checked="true"]
aria-disabled	&[aria-disabled="true"]
aria-expanded	&[aria-expanded="true"]
aria-hidden	&[aria-hidden="true"]
aria-pressed	&[aria-pressed="true"]
aria-required	&[aria-required="true"]
aria-selected	&[aria-selected="true"]
aria-[...]	&[aria-自定义属性]
rtl	[dir="rtl"]&
ltr	[dir="ltr"]&

附件

推荐图标库

Heroicons：heroicons.com/