Tailwind CSS 常用用法速查

发表于 2026-05-12 更新于 2026-06-26 分类于 frontend

从安装配置到布局、间距、排版、颜色、响应式、伪类与自定义主题，梳理 Tailwind CSS 开发中最常用的类名与写法，便于快速查阅与上手。

前言

Tailwind CSS 是一个实用优先的 CSS 框架。
它不提供预定义组件，而是提供大量原子化工具类，让你直接在 HTML 中组合出任意样式。
相比手写 CSS，这种方式省去了起类名、切换文件、处理样式冲突的烦恼，开发效率很高。
本文梳理日常开发中最常用到的 Tailwind 用法，涵盖布局、间距、排版、颜色、响应式、伪类和自定义配置，适合快速查阅。

安装

以 Vite + React 项目为例，安装 Tailwind v4 只需一条命令：

1	npm install tailwindcss @tailwindcss/vite

然后在 vite.config.ts 中注册插件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

在 CSS 入口文件中引入 Tailwind：

1	@import "tailwindcss";

配置完成后，所有工具类即可在项目中直接使用。

VSCode插件

Tailwind CSS IntelliSense

发布者： Tailwind Labs（官方）

核心功能：

智能提示： 输入类名时自动补全，支持自定义配置中的颜色、间距等 Token。
悬停预览： 鼠标悬停在类名上时，显示对应的实际 CSS 代码。
语法高亮 & 排序： 自动识别 Tailwind 类名并高亮；支持一键按官方推荐顺序排序类名。
Lint 检查： 检测无效类名、冲突类名等问题。

颜色与背景

Tailwind 内置了完整的调色板，格式为 {属性}-{颜色名}-{色阶}。

<!-- 文字颜色 -->
<span class="text-blue-600">蓝色文字</span>
<span class="text-red-500">红色警告</span>

<!-- 背景色 -->
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-white">白色背景</div>

<!-- 边框颜色 -->
<div class="border border-gray-300 rounded-lg p-4">带边框的卡片</div>

透明度通过 / 语法设置：bg-blue-500/50 表示 50% 透明度的蓝色背景。

当内置调色板无法满足需求时，可以用方括号语法直接使用任意色值：

<!-- 直接使用 HEX 色值 -->
<span class="text-[#1da1f2]">Twitter 蓝</span>
<div class="bg-[#f5f5f5]">自定义浅灰背景</div>
<div class="border border-[#e2e8f0]">自定义边框色</div>

<!-- 使用 RGB -->
<div class="bg-[rgb(255,107,107)]">RGB 红色背景</div>

<!-- 使用 HSL -->
<div class="text-[hsl(210,100%,50%)]">HSL 蓝色文字</div>

<!-- 任意色值同样支持透明度语法 -->
<div class="bg-[#1da1f2]/75">75% 透明度的自定义颜色</div>
<div class="bg-[rgb(59,130,246)]/50">50% 透明度的 RGB 颜色</div>

方括号写法适合品牌色、设计稿中的精确色值等一次性场景。如果某个色值在项目中反复使用，建议通过 @theme 提取为语义化变量（如 --color-brand），然后用 bg-brand 引用。

背景渐变

多色渐变节点

使用 via-{color} 添加中间色：

1
2
3

<span class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
  三色渐变
</span>

自定义渐变

当预设颜色不满足时（注意：这会产生 Lint 警告，建议提取到 config）：

<!-- 临时使用 -->
<span class="bg-[linear-gradient(90deg,#ff6b6b,#4ecdc4)]">
  自定义角度和颜色
</span>

背景图

基础用法

使用 bg-[url()] 任意值

适用于一次性使用的背景图（如特定页面的 Banner）。

<!-- 本地图片（需构建工具处理路径） -->
<div class="bg-[url('/images/hero.jpg')] bg-cover bg-center h-64"></div>

<!-- 远程图片 -->
<div class="bg-[url('https://example.com/bg.png')] bg-no-repeat bg-contain"></div>

注意：

在 Vite/Next.js 等项目中，本地图片路径可能需要特殊处理。例如 Next.js App Router 中建议使用 CSS Module 或内联样式传递动态路径，避免构建时路径解析失败。

常用速查

属性	工具类	说明
尺寸	`bg-cover` / `bg-contain` / `bg-auto`/`bg-[length:100%_100%]`	覆盖容器 / 完整显示 / 原始尺寸/宽高填充
位置	`bg-center` / `bg-top` / `bg-bottom-right`	9 个预设位置
重复	`bg-no-repeat` / `bg-repeat-x` / `bg-repeat-y`	不重复 / 水平重复 / 垂直重复
附着	`bg-fixed` / `bg-local` / `bg-scroll`	视差固定 / 随内容滚动 / 默认滚动
混合	`bg-blend-multiply` / `bg-blend-overlay`	背景与颜色的混合模式

边框

边框渐变

@utility gradient-border-brand {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--gradient-border-fill, #fff), var(--gradient-border-fill, #fff)) padding-box,
    linear-gradient(to right, #2a86ff, #15d283) border-box;
}

使用的时候直接用 gradient-border-brand 即可。

文字

字号

工具类	字号 (rem / px)	默认行高	适用场景
`text-xs`	0.75rem / 12px	1rem (16px)	辅助说明、标签、时间戳
`text-sm`	0.875rem / 14px	1.25rem (20px)	次要正文、表单文字、侧边栏
`text-base`	1rem / 16px	1.5rem (24px)	正文基准、段落内容
`text-lg`	1.125rem / 18px	1.75rem (28px)	引言、强调文本、卡片标题
`text-xl`	1.25rem / 20px	1.75rem (28px)	小标题、区块标题
`text-2xl`	1.5rem / 24px	2rem (32px)	页面副标题
`text-3xl`	1.875rem / 30px	2.25rem (36px)	页面主标题
`text-4xl`	2.25rem / 36px	2.5rem (40px)	大标题、Hero 区域
`text-5xl` ~ `text-9xl`	3rem ~ 8rem	1 ~ 1.1	展示型大字、数据看板

字重

在 Tailwind CSS 中设置字重（Font Weight）非常简单，主要通过 font-{weight} 工具类实现。

以下是完整指南：

工具类	CSS 值	常见名称
`font-thin`	`100`	Thin
`font-extralight`	`200`	Extra Light
`font-light`	`300`	Light
`font-normal`	`400`	Normal / Regular
`font-medium`	`500`	Medium
`font-semibold`	`600`	Semi Bold
`font-bold`	`700`	Bold
`font-extrabold`	`800`	Extra Bold
`font-black`	`900`	Black

行高

工具类	CSS 值	视觉效果
`leading-tight`	`1.25`	非常紧凑，适合大标题
`leading-snug`	`1.375`	略微紧凑，标题/短文本最佳平衡点
`leading-normal`	`1.5`	标准正文行高
`leading-relaxed`	`1.625`	宽松，长文阅读舒适

排版

文字相关工具类覆盖了字号、粗细、颜色、对齐、行高和字间距。

1
2
3

<h1 class="text-2xl font-bold text-gray-900">标题</h1>
<p class="text-base text-gray-600 leading-relaxed">正文内容，行高较宽松。</p>
<p class="text-sm text-gray-400 mt-1">辅助说明文字</p>

常用字号：text-xs（12px）、text-sm（14px）、text-base（16px）、text-lg（18px）、text-xl（20px）、text-2xl（24px）。

文字截断用 truncate，多行截断需要配合自定义：

<!-- 单行截断 -->
<p class="truncate">这是一段很长很长的文字会被截断并显示省略号</p>

<!-- 多行截断（Tailwind 内置） -->
<p class="line-clamp-3">很长的段落内容，超过三行将被截断并显示省略号。</p>

文字颜色渐变

在 Tailwind CSS 中实现文字颜色渐变，核心原理是将背景裁剪到文字区域。需要组合使用三个工具类：

1
2
3

<span class="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
  渐变文字
</span>

三件套缺一不可

表格

工具类	作用	对应 CSS
`bg-gradient-to-{方向}`	定义渐变方向和颜色节点	`background-image: linear-gradient(...)`
`bg-clip-text`	将背景裁剪为文字形状	`-webkit-background-clip: text`
`text-transparent`	必须设置，让文字本身透明以透出背景色	`color: transparent`

关键提醒：

忘记写 text-transparent 是最常见的错误，会导致文字显示为默认黑色，渐变完全不可见。

文字渐变必须文字使用span包围，使用div不生效。

常用渐变方向

bg-gradient-to-r → 从左到右（最常用）
bg-gradient-to-b → 从上到下
bg-gradient-to-br → 从左上到右下
bg-gradient-to-tl → 从右下到左上

从上到下渐变

1	bg-gradient-to-b from-[#D8E0F0] to-transparent bg-clip-text

多色渐变

多色渐变节点

使用 via-{color} 添加中间色：

1
2
3

<span class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text text-transparent">
  三色渐变
</span>

自定义任意值渐变

当预设颜色不满足时（注意：这会产生 Lint 警告，建议提取到 config）：

<!-- 临时使用 -->
<span class="bg-[linear-gradient(90deg,#ff6b6b,#4ecdc4)] bg-clip-text text-transparent">
  自定义角度和颜色
</span>

圆角

圆角用 rounded-*，可以快速给元素添加不同大小的圆角。

圆角大小

从无圆角到完全圆形，Tailwind 提供了多个预设尺寸：

<!-- 无圆角 -->
<div class="rounded-none">无圆角</div>

<!-- 小圆角 -->
<div class="rounded-sm">小圆角 (0.125rem)</div>

<!-- 默认圆角 -->
<div class="rounded">默认圆角 (0.25rem)</div>

<!-- 中圆角 -->
<div class="rounded-md">中圆角 (0.375rem)</div>

<!-- 大圆角 -->
<div class="rounded-lg">大圆角 (0.5rem)</div>

<!-- 特大圆角 -->
<div class="rounded-xl">特大圆角 (0.75rem)</div>
<div class="rounded-2xl">超大圆角 (1rem)</div>
<div class="rounded-3xl">极大圆角 (1.5rem)</div>

<!-- 完全圆形 -->
<div class="rounded-full">完全圆形 (9999px)</div>

rounded-full 最常用于圆形头像和圆形按钮：

1 2	<img class="rounded-full w-16 h-16" src="avatar.jpg" alt="头像" /> <button class="rounded-full w-10 h-10 bg-blue-500">+</button>

方向性圆角

可以单独设置某一边的圆角，前缀如下：

前缀	作用方向
rounded	四个角
rounded-t	上方两个角
rounded-r	右方两个角
rounded-b	下方两个角
rounded-l	左方两个角
rounded-tl	左上角
rounded-tr	右上角
rounded-br	右下角
rounded-bl	左下角

<!-- 只有上方圆角 -->
<div class="rounded-t-lg bg-white p-4">顶部圆角卡片</div>

<!-- 只有左上和右下圆角 -->
<div class="rounded-tl-lg rounded-br-lg bg-gray-100 p-4">对角圆角</div>

<!-- Tab 栏效果 -->
<div class="flex">
  <div class="rounded-t-lg bg-white px-4 py-2">标签 1</div>
  <div class="rounded-t-lg bg-gray-200 px-4 py-2">标签 2</div>
</div>

常用圆角类名速查

Class	Properties
rounded-none	border-radius: 0px;
rounded-sm	border-radius: 0.125rem;
rounded	border-radius: 0.25rem;
rounded-md	border-radius: 0.375rem;
rounded-lg	border-radius: 0.5rem;
rounded-xl	border-radius: 0.75rem;
rounded-2xl	border-radius: 1rem;
rounded-3xl	border-radius: 1.5rem;
rounded-full	border-radius: 9999px;

方向性圆角同样适用以上尺寸，例如 rounded-t-lg、rounded-bl-xl。

自定义圆角

使用方括号语法可以指定任意圆角值：

<!-- 自定义像素值 -->
<div class="rounded-[20px]">20px 圆角</div>

<!-- 自定义 rem 值 -->
<div class="rounded-[1.5rem]">1.5rem 圆角</div>

<!-- 自定义百分比（用于椭圆形状） -->
<div class="rounded-[50%]">50% 圆角（椭圆）</div>

<!-- 不对称圆角 -->
<div class="rounded-tl-[2rem] rounded-br-[2rem]">对角大圆角</div>

实际应用场景

<!-- 卡片组件 -->
<div class="rounded-xl shadow-md p-6 bg-white">
  <h3 class="font-semibold">卡片标题</h3>
  <p class="text-gray-600">卡片内容描述</p>
</div>

<!-- 按钮样式 -->
<button class="rounded-full px-6 py-2 bg-blue-500 text-white hover:bg-blue-600">
  圆角按钮
</button>

<!-- 输入框 -->
<input class="rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />

<!-- 图片画廊 -->
<div class="grid grid-cols-3 gap-4">
  <img class="rounded-lg object-cover w-full h-32" src="img1.jpg" />
  <img class="rounded-xl object-cover w-full h-32" src="img2.jpg" />
  <img class="rounded-2xl object-cover w-full h-32" src="img3.jpg" />
</div>

阴影

阴影用 shadow-*：

轻到重递增

shadow-sm
shadow-md
shadow-lg
shadow-xl

溢出

overflow-* 控制元素内容溢出时的行为。

<!-- 隐藏溢出 -->
<div class="overflow-hidden">内容超出会被裁剪</div>

<!-- 需要时才出现滚动条 -->
<div class="overflow-auto">内容超出时自动出现滚动条</div>

<!-- 始终显示滚动条 -->
<div class="overflow-scroll">始终显示滚动条</div>

也可以单独控制某一方向：

<!-- 仅垂直方向滚动 -->
<div class="overflow-y-auto overflow-x-hidden">垂直可滚动，水平隐藏</div>

<!-- 仅水平方向滚动 -->
<div class="overflow-x-auto overflow-y-hidden whitespace-nowrap">
  <span>很长</span><span>的</span><span>横向</span><span>内容</span>
</div>

常用搭配：overflow-hidden 配合 truncate 做文本截断；overflow-auto 配合 max-h-96 做固定高度可滚动区域；overflow-x-auto 让表格或代码块在小屏上横向滚动。

响应式

Tailwind 采用移动优先策略，默认样式针对最小屏幕，通过前缀在更大屏幕上覆盖。

常用断点：sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px）。

<!-- 小屏单列，中屏两列，大屏四列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<!-- 中屏以上隐藏 -->
<div class="block md:hidden">仅在小屏显示</div>

<!-- 中屏以上显示 -->
<div class="hidden md:block">仅在中屏及以上显示</div>

响应式前缀可以叠加在任意工具类上，如 md:text-lg、lg:p-8。

伪类与交互状态

Tailwind 将常见伪类映射为前缀，无需手写 CSS 选择器。

<!-- hover -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">悬停变色</button>

<!-- focus -->
<input
  class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none p-2 rounded"
/>

<!-- group-hover -->
<div class="group">
  <span class="text-gray-800 group-hover:text-blue-500">悬停父元素时变色</span>
</div>

<!-- peer（配合表单） -->
<input type="checkbox" class="peer" />
<span class="peer-checked:text-blue-600">选中后变蓝</span>

disabled:opacity-50 设置禁用态透明度，first:mt-0 为列表第一项去掉上边距，odd:bg-gray-50 实现斑马纹。

过渡与动画

过渡效果通过 transition 类加上持续时间和属性控制：

<button
  class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded
               transition-colors duration-200 ease-in-out"
>
  平滑变色
</button>

transition-colors 仅过渡颜色属性，transition-all 过渡所有属性。
duration-150、duration-300 控制时长，ease-in、ease-out、ease-in-out 控制缓动。

内置动画类：

1
2
3

<div class="animate-spin">旋转</div>
<div class="animate-pulse">脉冲闪烁</div>
<div class="animate-bounce">弹跳</div>

自定义配置

当内置工具类不够用时，可以通过 CSS 变量或 @theme 指令扩展。

在 CSS 中自定义主题变量：

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --font-family-sans: "Inter", "Noto Sans SC", sans-serif;
}

配置完成后即可使用 bg-primary、text-primary-dark、font-sans 等类名。

也可以在 HTML 中用方括号写法直接写任意值：

1
2
3

<div class="top-[117px]">精确偏移</div>
<div class="bg-[#1da1f2]">自定义颜色</div>
<div class="grid-cols-[200px_1fr_auto]">自定义网格列</div>

方括号写法适合一次性或调试场景，复用频率高的值建议提取到主题配置中。

Rem适配

Tailwind CSS 原生默认就是基于 rem 的。它的核心设计哲学是 Mobile-First + rem 相对单位，几乎所有间距、字号、圆角等工具类都输出为 rem 值（如 p-4 → padding: 1rem）。

但”支持 rem 适配”在实际项目中通常指两层含义，需要区分清楚：

Tailwind 默认的 rem 行为

工具类	输出 CSS	基准
`text-base`	`font-size: 1rem`	默认 16px
`p-4`	`padding: 1rem`	1 unit = 0.25rem
`m-8`	`margin: 2rem`	1 unit = 0.25rem
`rounded-lg`	`border-radius: 0.5rem`	预设 Token

关键前提：

rem 生效依赖于 <html> 元素的 font-size。浏览器默认 16px，即 1rem = 16px。

如果你修改了根字体大小，所有 Tailwind 尺寸会等比缩放。

自动适配

// utils/rem.js
function setRootFontSize() {
  const designWidth = 1920; // 设计稿基准宽度
  const baseFontSize = 16; // 基准 font-size
  const clientWidth = document.documentElement.clientWidth;
  
  // 限制最小/最大缩放范围，防止极端尺寸
  const scale = Math.min(Math.max(clientWidth / designWidth, 0.8), 1.5);
  document.documentElement.style.fontSize = `${baseFontSize * scale}px`;
}

window.addEventListener('resize', setRootFontSize);
setRootFontSize();

前言

安装

VSCode插件

颜色与背景

背景渐变

多色渐变节点

自定义渐变

背景图

基础用法

常用速查

边框

边框渐变

文字

字号

字重

行高

排版

文字颜色渐变

常用渐变方向

多色渐变

多色渐变节点

自定义任意值渐变

推荐做法

圆角

圆角大小

方向性圆角

常用圆角类名速查

自定义圆角

实际应用场景

阴影

溢出

响应式

伪类与交互状态

过渡与动画

自定义配置

Rem适配