一、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：圆形圆角（全圆角）

类	作用
border	边框
border-t	上边框
border-b	下边框
border-gray-200	灰色边框

示例：

<div class="border-b border-gray-200">

类	作用
rounded	圆角
rounded-md	中圆角
rounded-lg	大圆角
rounded-full	圆形

示例：

<img class="rounded-full">

---

八、定位

类	作用
relative	相对定位
absolute	绝对定位
fixed	固定
left-0	左0
right-0	右0
top-0	上0
bottom-0	下0

示例：

<div class="relative">

---

九、溢出

类	作用
overflow-hidden	隐藏
overflow-auto	滚动
overflow-scroll	强制滚动

示例：

<div class="overflow-auto">

---

十、阴影

类	作用
shadow	阴影
shadow-md	中等
shadow-lg	大

示例：

<div class="shadow-md">

---

十一、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>

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

1. 输入框聚焦

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

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

1. 按钮聚焦

<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>

列表

<div class="flex items-center p-4 border-b">

---

居中

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

---

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 → 子元素自动间距

Tailwind 基本就是：

属性 + 值

例如：

text-red-500

意思：

text → color red → 颜色 500 → 深度

二十六、推荐 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：https://heroicons.com/