Tailwind CSS 常用用法速查

发表于 2026-05-12 更新于 2026-05-21 分类于 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";

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

尺寸

宽度和高度使用 w-* 和 h-*，支持固定值和百分比。

<!-- 固定宽度 -->
<div class="w-64 h-32">固定尺寸</div>

<!-- 百分比 -->
<div class="w-full">全宽</div>
<div class="w-1/2">半宽</div>

<!-- 最小/最大宽高 -->
<div class="min-w-0 max-w-screen-lg">限制宽度</div>

w-screen 和 h-screen 对应视口宽高，w-fit 和 w-min、w-max 分别对应内容尺寸和最大内容尺寸。

Class	Properties
w-0	width: 0px;
w-px	width: 1px;
w-0.5	width: 0.125rem; /_ 2px _/
w-1	width: 0.25rem; /_ 4px _/
w-1.5	width: 0.375rem; /_ 6px _/
w-2	width: 0.5rem; /_ 8px _/
w-auto	width: auto;
w-1/2	width: 50%;
w-1/3	width: 33.333333%;
w-1/4	width: 25%;
w-1/6	width: 16.666667%;
w-1/12	width: 8.333333%;
w-full	width: 100%;
w-screen	width: 100vw;
w-svw	width: 100svw;
w-lvw	width: 100lvw;
w-dvw	width: 100dvw;
w-min	width: min-content;
w-max	width: max-content;
w-fit	width: fit-content;

布局

Tailwind 提供了完整的 Flexbox 和 Grid 工具类，足以覆盖绝大多数布局场景。

Flex 布局

使用 flex 开启弹性布局，配合 items-* 和 justify-* 控制对齐方式：

<!-- 水平居中 + 垂直居中 -->
<div class="flex items-center justify-center">
  <span>居中内容</span>
</div>

<!-- 两端对齐 -->
<div class="flex justify-between items-center">
  <span>左侧</span>
  <span>右侧</span>
</div>

<!-- 换行排列 -->
<div class="flex flex-wrap gap-4">
  <div class="w-32 h-32 bg-blue-500">1</div>
  <div class="w-32 h-32 bg-blue-500">2</div>
  <div class="w-32 h-32 bg-blue-500">3</div>
</div>

flex-col 可将主轴切换为纵向，gap-4 统一控制子元素间距。

Flex 子项

容器上的工具类控制整体布局，子项上的工具类控制每个元素的伸缩与对齐。

flex-1 让子项等分剩余空间，flex-none 让子项固定不动：

<div class="flex">
  <div class="w-20 flex-none">固定宽度</div>
  <div class="flex-1">占满剩余空间</div>
</div>

basis-* 设置子项的初始尺寸，适合按比例分配：

<div class="flex">
  <div class="basis-1/3">占 1/3</div>
  <div class="basis-2/3">占 2/3</div>
</div>

flex-grow 允许拉伸，flex-shrink-0 禁止压缩：

<div class="flex">
  <div class="flex-grow">可拉伸</div>
  <div class="flex-shrink-0">不压缩</div>
</div>

order-* 控制排列顺序，-order-first 移到最前，order-last 移到最后：

<div class="flex">
  <div class="order-3">排第三</div>
  <div class="order-1">排第一</div>
  <div class="order-2">排第二</div>
</div>

self-* 单独覆盖某个子项的对齐方式：

<div class="flex items-start">
  <div>顶部对齐</div>
  <div class="self-end">底部对齐</div>
  <div class="self-center">居中对齐</div>
</div>

常用子项类名速查：flex-1（等分空间）、flex-auto（按内容分配）、flex-none（固定不动）、flex-grow（允许拉伸）、flex-grow-0（禁止拉伸）、flex-shrink-0（禁止压缩）、basis-full（独占一行）、self-start/center/end/stretch（单独覆盖对齐）。

Grid 布局

使用 grid 开启网格布局，grid-cols-* 定义列数：

<!-- 三列等宽 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4">A</div>
  <div class="bg-gray-100 p-4">B</div>
  <div class="bg-gray-100 p-4">C</div>
</div>

也可以用 grid-cols-[200px_1fr] 这种方括号写法自定义列宽，适合侧边栏 + 内容区的经典布局。

1 2	<div class="grid grid-cols-3 gap-x-4 gap-y-3"> </div>

间距

Tailwind 用 p-* 和 m-* 设置内边距和外边距，数值对应 0.25rem 的倍数。

Padding（内边距）

p-* 设置四个方向的内边距，也可以按方向单独设置：

前缀	作用方向
p	四个方向
px	左右
py	上下
pt	上
pr	右
pb	下
pl	左

常用数值速查：

Class	Properties
p-0	padding: 0px;
p-px	padding: 1px;
p-0.5	padding: 0.125rem; /_ 2px _/
p-1	padding: 0.25rem; /_ 4px _/
p-1.5	padding: 0.375rem; /_ 6px _/
p-2	padding: 0.5rem; /_ 8px _/
p-2.5	padding: 0.625rem; /_ 10px _/
p-3	padding: 0.75rem; /_ 12px _/
p-3.5	padding: 0.875rem; /_ 14px _/
p-4	padding: 1rem; /_ 16px _/
p-5	padding: 1.25rem; /_ 20px _/
p-6	padding: 1.5rem; /_ 24px _/
p-8	padding: 2rem; /_ 32px _/
p-10	padding: 2.5rem; /_ 40px _/
p-12	padding: 3rem; /_ 48px _/
p-16	padding: 4rem; /_ 64px _/
p-20	padding: 5rem; /_ 80px _/
p-24	padding: 6rem; /_ 96px _/

以上数值同样适用于 px、py、pt、pr、pb、pl 前缀。

<!-- 四周统一内边距 -->
<div class="p-4">padding: 1rem</div>

<!-- 水平和垂直分别设置 -->
<div class="px-6 py-4">左右 1.5rem，上下 1rem</div>

<!-- 单独设置某一方向 -->
<div class="pt-8 pb-4 pl-6 pr-6">上 2rem，下 1rem，左右 1.5rem</div>

Margin（外边距）

m-* 设置四个方向的外边距，方向前缀与 padding 一致：

前缀	作用方向
m	四个方向
mx	左右
my	上下
mt	上
mr	右
mb	下
ml	左

常用数值速查：

Class	Properties
m-0	margin: 0px;
m-px	margin: 1px;
m-0.5	margin: 0.125rem; /_ 2px _/
m-1	margin: 0.25rem; /_ 4px _/
m-1.5	margin: 0.375rem; /_ 6px _/
m-2	margin: 0.5rem; /_ 8px _/
m-2.5	margin: 0.625rem; /_ 10px _/
m-3	margin: 0.75rem; /_ 12px _/
m-3.5	margin: 0.875rem; /_ 14px _/
m-4	margin: 1rem; /_ 16px _/
m-5	margin: 1.25rem; /_ 20px _/
m-6	margin: 1.5rem; /_ 24px _/
m-8	margin: 2rem; /_ 32px _/
m-10	margin: 2.5rem; /_ 40px _/
m-12	margin: 3rem; /_ 48px _/
m-16	margin: 4rem; /_ 64px _/
m-20	margin: 5rem; /_ 80px _/
m-24	margin: 6rem; /_ 96px _/
m-auto	margin: auto;

Margin 支持负值，用 - 前缀表示：

Class	Properties
-m-1	margin: -0.25rem; /_ -4px _/
-m-2	margin: -0.5rem; /_ -8px _/
-m-4	margin: -1rem; /_ -16px _/
-m-8	margin: -2rem; /_ -32px _/

<!-- 四周统一外边距 -->
<div class="m-4">margin: 1rem</div>

<!-- 水平居中（块级元素） -->
<div class="mx-auto w-96">左右 auto 实现水平居中</div>

<!-- 上下间隔 -->
<div class="my-8">上下各 2rem 外边距</div>

<!-- 负边距（常用于抵消父元素 padding） -->
<div class="p-4">
  <div class="-mx-4 bg-gray-100 p-4">负边距撑满父容器</div>
</div>

<!-- 单方向设置 -->
<h2 class="mt-8 mb-4">标题上方留白多，下方留白少</h2>

space 间距

space-x-* 和 space-y-* 可以在不使用 gap 的情况下给子元素统一加间距（原理是给除第一个子元素外的元素添加 margin）：

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

<div class="space-y-4">
  <p>段落 1</p>
  <p>段落 2</p>
  <p>段落 3</p>
</div>

space-x-reverse 和 space-y-reverse 用于反转排列时修正间距方向。

文字与排版

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

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 内置了完整的调色板，格式为 {属性}-{颜色名}-{色阶}。

<!-- 文字颜色 -->
<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 引用。

圆角

圆角用 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>

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

总结

以上是 Tailwind CSS 日常开发中最高频的用法。
核心思路就是用工具类直接在 HTML 中声明样式，保持开发时注意力不离开模板文件。
常用模式记住即可，不常用的类名查阅官方文档即可快速找到。
建议在实际项目中配合 IDE 的 Tailwind 插件获得自动补全和排序，开发体验会更加顺畅。