Lazy loaded image
前端开发
🌬️Tailwind-CSS ：从安装到常用语法
字数 1944阅读时长≈ 5 分钟
2026-7-16
2026-7-20
Tailwind CSS 是一个原子化（utility-first）CSS 框架。它不要求先给每个组件起一个 CSS 类名，再在样式表中编写声明；开发者直接在 HTML 或 JSX 的 class 中组合小粒度的工具类，例如 flex、gap-4、text-sm 和 bg-blue-600。
这种方式的重点不是“完全不写 CSS”，而是把大部分视觉规则放在组件附近：结构、间距、颜色和响应式规则可以一起阅读，组件之间也更容易复用统一的设计 token。
本文基于 Tailwind CSS 4 编写。Tailwind 4 采用 CSS-first 配置，和许多旧教程中的 Tailwind 3 配置方式不同。

1. 在 Vite + React 项目中安装

Tailwind 4 推荐通过 Vite 插件接入。先安装运行时依赖：
然后编辑 vite.config.ts，注册插件：
最后在入口 CSS 文件（通常是 src/index.css）中引入 Tailwind：
确保入口文件已在 src/main.tsx 中被导入：
现在便可以在组件中使用工具类：
运行 npm run dev 后，页面就会生成对应的 CSS。Tailwind 会根据项目中实际出现的类名生成样式，因此通常不需要手动维护冗长的 CSS 文件。

2. 配置文件：Tailwind 4 的 CSS-first 方式

Tailwind 4 不再要求创建 tailwind.config.js。绝大部分主题配置直接放在 CSS 的 @theme 中：
上述 token 会自动产生工具类。例如：
这里的 --color-brand-500 对应 bg-brand-500、text-brand-500 和 border-brand-500；--font-display 对应 font-display；--breakpoint-xs 则提供 xs: 响应式变体。相比把所有选项集中放在 JavaScript 对象中，设计 token 可以和普通 CSS 变量、字体导入一起维护。

何时需要 tailwind.config.js

许多 Tailwind 3 项目仍使用如下配置文件：
它的作用是告诉 Tailwind 扫描哪些文件，并扩展主题。若项目固定在 Tailwind 3，仍可继续使用这种方式；新建 Tailwind 4 + Vite 项目则优先使用 @tailwindcss/vite 和 @theme。不要把旧教程的 @tailwind base;、@tailwind components;、@tailwind utilities; 当作 Tailwind 4 的默认入口，v4 只需 @import "tailwindcss";。

3. 基础规则与命名规律

一个工具类通常由“属性 + 值”构成。数值间距类遵循固定比例：p-4、mt-6、gap-2 分别表示内边距、上外边距和子项间距。常用方向缩写如下：
缩写
含义
示例
p / m
padding / margin
p-4、m-2
x / y
水平 / 垂直两侧
px-6、my-4
t / r / b / l
上 / 右 / 下 / 左
pt-2、ml-3
w / h
width / height
w-full、h-10
当设计值不在默认尺度中，可以使用方括号写任意值：
任意值很实用，但如果一个值会在多个组件中重复，应优先提炼为 @theme token，而不是复制多个 [...]。

4. 常见语法速查

布局：Flex 与 Grid

  • flex、grid：启用布局模式。
  • items-center：在交叉轴居中；justify-between：主轴两端对齐。
  • gap-4：子元素间距，不必逐个添加外边距。
  • grid-cols-1 md:grid-cols-3：小屏一列，中等及以上屏幕三列。

尺寸、间距与容器

  • w-full 让容器占满可用宽度；max-w-6xl 限制最大宽度。
  • mx-auto 让有最大宽度的块级元素水平居中。
  • px-* 和 py-* 分别控制水平与垂直内边距。

文字、颜色与边框

  • text-xl、text-sm 控制字号，font-semibold 控制字重。
  • text-slate-900、bg-white、border-slate-200 分别控制文字、背景和边框颜色。
  • rounded-lg、shadow-sm 用于圆角和阴影；应按设计系统统一使用，不要在同一产品中随意混用大小。

状态变体：hover、focus 与 disabled

变体放在工具类前面，以冒号连接：
常见变体包括 hover:、focus:、focus-visible:、active:、disabled:、checked: 和 first:。使用 focus-visible: 可以在键盘导航时保留清晰的焦点提示，同时避免鼠标点击时出现不必要的描边。

响应式设计

Tailwind 默认采用移动优先策略：没有前缀的类作用于全部屏幕，sm:、md:、lg:、xl: 等前缀只在对应断点及以上生效。
移动端默认纵向排列；当屏幕达到 md 时，再切换为横向排列。这种写法比先写桌面样式、再用媒体查询覆盖更容易维护。

深色模式

在 Tailwind 的默认深色模式策略下，给根元素添加 dark 类即可启用 dark: 变体：
通常在应用根节点根据用户设置切换 <html class="dark">。深色模式不应只替换背景色，也要检查正文、边框、禁用状态和焦点状态的对比度。

5. 在 React 中组织类名

className 过长时，可按“布局、尺寸、视觉、交互、响应式”的顺序分组，便于阅读。对于条件类名，推荐使用 clsx：
如果项目中还使用 tailwind-merge，可以在封装组件时合并冲突类名，例如外部传入的 px-6 覆盖内部默认的 px-4。这比依赖类名书写顺序更可靠。

6. 实践建议

  1. 先使用现成的间距、颜色和字体尺度，只有重复出现的自定义值才进入 @theme。
  1. 组件复杂时抽取 React 组件，而不是为重复类名创建语义模糊的 CSS 类。
  1. 交互控件始终提供 hover、focus-visible、disabled 等状态，并检查文字与背景的对比度。
  1. 响应式样式从移动端开始写，再逐级添加 md: 和 lg: 规则。
  1. 不要根据运行时字符串拼接完整类名，例如 bg-${color}-500；Tailwind 无法可靠扫描它。改用完整类名映射：
Tailwind 的价值在于用一套有限、可组合的规则快速构建一致的界面。掌握布局、间距、状态变体和响应式前缀后，绝大多数页面都能高效完成；随后再通过 @theme 把品牌颜色、字体和断点沉淀为可复用的设计语言。
 
上一篇
Tailwind 工程化：迁移动机、使用规范与设计系统共存
下一篇
TaskFlow：一个偏个人工作台风格的任务管理项目
目录