Tailwind CSS 常用用法速查

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

前言

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

安装

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

1
npm install tailwindcss @tailwindcss/vite

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

1
2
3
4
5
6
7
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";

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

布局

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

Flex 布局

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 水平居中 + 垂直居中 -->
<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 让子项固定不动：

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

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

1
2
3
4
<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 禁止压缩：

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

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

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

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

1
2
3
4
5
<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-* 定义列数：

1
2
3
4
5
6
<!-- 三列等宽 -->
<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] 这种方括号写法自定义列宽，适合侧边栏 + 内容区的经典布局。

间距

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

  • p-4 等于 padding: 1rem
  • m-2 等于 margin: 0.5rem
  • px-4 仅设置水平方向，py-4 仅设置垂直方向
  • mt-8 设置上边距，mr-auto 实现右 margin 自动撑开

负边距用 -m-2 前缀即可。

1
2
3
<div class="px-6 py-4 m-2">
  四周分别设置了内边距和外边距
</div>

space-x-* 和 space-y-* 可以在不使用 gap 的情况下给子元素统一加间距：

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

文字与排版

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

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，多行截断需要配合自定义：

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

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

颜色与背景

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

1
2
3
4
5
6
7
8
9
10
<!-- 文字颜色 -->
<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% 透明度的蓝色背景。

圆角与阴影

圆角用 rounded-*，阴影用 shadow-*：

1
2
3
4
5
<div class="rounded-lg shadow-md p-6 bg-white">
  带圆角和阴影的卡片
</div>

<img class="rounded-full w-16 h-16" src="avatar.jpg" alt="头像" />

rounded-full 适用于圆形头像。
shadow-sm、shadow-md、shadow-lg、shadow-xl 从轻到重递增。

尺寸

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

1
2
3
4
5
6
7
8
9
<!-- 固定宽度 -->
<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;

溢出

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

1
2
3
4
5
6
7
8
<!-- 隐藏溢出 -->
<div class="overflow-hidden">内容超出会被裁剪</div>

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

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

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

1
2
3
4
5
6
7
<!-- 仅垂直方向滚动 -->
<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）。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 小屏单列，中屏两列，大屏四列 -->
<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 选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 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 类加上持续时间和属性控制：

1
2
3
4
<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 中自定义主题变量：

1
2
3
4
5
6
7
@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 插件获得自动补全和排序，开发体验会更加顺畅。