Tailwind CSS 学习手册

灵均有风在一月
0 阅读12分钟

一、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-xs12px
text-sm14px
text-base16px
text-lg18px
text-xl20px
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）

前缀最小宽度
sm640
md768
lg1024
xl1280
2xl1536

十、状态样式

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-11px 高亮环box-shadow: 0 0 0 1px
ring-22px 高亮环box-shadow: 0 0 0 2px
ring-44px 高亮环box-shadow: 0 0 0 4px
ring-88px 高亮环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>

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/

avatar
文章
阅读
粉丝