Tailwind CSSTailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量的原子类（utility

Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量的原子类（utility classes）来帮助我们快速构建现代化的用户界面。与传统的 CSS 框架不同，Tailwind 不提供预定义的组件，而是让我们通过组合这些原子类来创建自定义的设计。

为什么选择 Tailwind CSS？

1. 开发效率高

无需在 HTML 和 CSS 文件间频繁切换，直接在标签中编写样式
不必为类名命名烦恼，避免 .user-card-header-title-large 这样的命名困扰
丰富的原子类开箱即用，减少重复的 CSS 代码

<!-- 传统方式需要定义多个类 -->
<style>
  .btn {
    padding: 0.5rem 1rem;
    background: blue;
    ...;
  }
  .btn-primary {
    background: #3b82f6;
  }
  .btn-hover:hover {
    background: #2563eb;
  }
</style>

<!-- Tailwind 直接组合 -->
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-700">按钮</button>

2. 响应式设计简单

通过断点前缀轻松实现响应式布局，无需编写复杂的媒体查询：

<div class="text-sm md:text-base lg:text-lg xl:text-xl">自动适配不同屏幕尺寸</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">移动端单列，平板双列，桌面三列</div>

3. 暗黑模式开箱即用

使用 dark: 前缀即可实现暗黑模式，无需维护两套样式表：

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">自动适配亮色/暗色主题</div>

4. 状态变体丰富

内置的伪类和状态变体让交互样式变得简单：

<button
  class="
  bg-blue-500
  hover:bg-blue-700
  focus:ring-2
  focus:ring-blue-300
  active:scale-95
  disabled:opacity-50
"
>
  丰富的交互状态
</button>

<!-- 群组交互 -->
<div class="group">
  <img class="group-hover:scale-110 transition" />
  <p class="group-hover:text-blue-500">鼠标悬停时图片和文字同时响应</p>
</div>

5. 高度可定制

通过 tailwind.config.js 可以自定义：

颜色、字体、间距等设计系统
响应式断点
自定义工具类和变体
使用任意值语法：bg-[#1da1f2]、p-[17px]

6. 性能优化

Tree-shaking：生产环境自动移除未使用的样式，最终 CSS 文件通常只有 5-10KB
JIT 模式：按需即时编译，开发时无需等待完整构建
CSS 体积可控：不会随着项目增长无限膨胀

7. 维护性强

样式与结构紧密关联，修改时不担心影响其他地方
删除组件时样式也随之移除，避免 CSS 冗余
团队协作时无需统一类名规范，降低沟通成本

Tailwind 语法规则

Tailwind 的类名遵循一套系统化的命名规则：[variant:]property-value

property: 属性名称（如 text、bg、p、m）
value: 属性值（如 red、4、xl）
variant: 可选的变体前缀（如 hover:、md:、dark:）

1. 尺寸与间距

基于 0.25rem = 4px 的刻度系统：

<div class="p-4 m-8"></div>
<!-- p-4 = padding: 1rem (16px) -->
<!-- m-8 = margin: 2rem (32px) -->

2. 颜色系统

格式：property-color-shade，色调从 50（最浅）到 900（最深）

<div class="bg-blue-500 text-red-700"></div>

3. 方向简写

x/y = 水平/垂直，t/r/b/l = 上/右/下/左

<div class="px-4 mt-2"></div>
<!-- px-4 = padding 左右各 1rem -->
<!-- mt-2 = margin-top: 0.5rem -->

4. 变体叠加

用 : 连接多个变体：

<button class="hover:bg-blue-700">悬停变色</button>
<button class="md:hover:bg-blue-700">中等屏幕+悬停</button>
<div class="dark:md:hover:bg-gray-800">暗黑+中屏+悬停</div>

常用变体：hover:、focus:、active:、sm:、md:、lg:、dark:、group-hover:

变体类型	示例	映射到
媒体查询	sm:, md:, lg:	@media (min-width: ...)
伪类	hover:, focus:, active:	:hover, :focus, :active
伪元素	before:, after:	::before, ::after
属性选择器	dark:, rtl:	.dark &, [dir="rtl"] &
群组	group-hover:	.group:hover &
兄弟元素	peer-focus:	.peer:focus ~ &

5. 任意值

用方括号 [] 使用自定义值：

<div class="p-[17px] bg-[#1da1f2] top-[117px]"></div>
<div class="bg-[var(--my-color)]"></div>

6. 负值

用 - 前缀表示负值：

<div class="-mt-4 -translate-x-1/2"></div>

7. 分数值

用 / 表示百分比：

<div class="w-1/2 w-1/3 w-2/3"></div>
<!-- 50%, 33.33%, 66.67% -->

8. 透明度修饰符

用 / 添加透明度：

<div class="bg-black/50"></div>
<!-- 50% 透明度 -->
<input class="placeholder-gray-500/75" placeholder="搜索" />

9. 完整示例

<button
  class="
  px-4 py-2
  bg-blue-500
  text-white
  rounded-lg
  hover:bg-blue-700
  focus:ring-2
  focus:ring-blue-300
  disabled:opacity-50
  md:px-6
  dark:bg-blue-600
  transition-colors
  duration-200
"
>
  按钮文本
</button>

Tailwind CSS 常用原子类

Tailwind CSS 提供了丰富的原子类，以下是主要的类别：

box

box-sizing: box-border / box-content

size/margin/padding

前缀	长度值 → 属性
`w-`	`width`
`min-w-`	`min-width`
`max-w-`	`max-width`
`h-`	`height`
`min-h-`	`min-height`
`max-h-`	`max-height`

前缀	长度值 → 属性
`m-`	`margin`
`mx-`	`margin-left/right`
`my-`	`margin-top/bottom`
`mt-`	`margin-top`
`mr-`	`margin-right`
`mb-`	`margin-bottom`
`ml-`	`margin-left`

前缀	长度值 → 属性
`p-`	`padding`
`px-`	`padding-left/right`
`py-`	`padding-top/bottom`
`pt-`	`padding-top`
`pr-`	`padding-right`
`pb-`	`padding-bottom`
`pl-`	`padding-left`

border

前缀	颜色值 → 属性	长度值 → 属性
`border-`	`border-color`	`border-width`
`border-t-`	`border-top-color`	`border-top-width`
`border-r-`	`border-right-color`	`border-right-width`
`border-b-`	`border-bottom-color`	`border-bottom-width`
`border-l-`	`border-left-color`	`border-left-width`

预设值

border-style: border-(solid/dashed/dotted/double/hidden/none)

border-radius

自定义值

前缀	长度值 → 属性
`rounded-`	`border-radius`
`rounded-t-`	`border-top-radius`
`rounded-r-`	`border-right-radius`
`rounded-b-`	`border-bottom-radius`
`rounded-l-`	`border-left-radius`
`rounded-tl-`	`border-top-left-radius`
`rounded-tr-`	`border-top-right-radius`
`rounded-br-`	`border-bottom-right-radius`
`rounded-bl-`	`border-bottom-left-radius`

预设值

border-radius: rounded / rounded-(none/sm/md/lg/xl/2xl/3xl/full)

layout

position: static / relative / absolute / fixed / sticky
display: block / inline / flex / grid...

inline

text-align: text-(left/center/right/justify/start/end)
vertical-align: align-(baseline/top/middle/bottom/text-top/text-bottom/sub/super)

flex

自定义值

前缀	长度值 → 属性	数字值 → 属性
`basis-`	`flex-basis`	-
`order-`	-	`order`

容器属性（Container）

flex-direction: flex-row / flex-row-reverse / flex-col / flex-col-reverse
flex-wrap: flex-wrap / flex-wrap-reverse / flex-nowrap

项目属性（Items）

flex: flex-(1/auto/initial/none)
flex-grow: grow / grow-0
flex-shrink: shrink / shrink-0
order: order-first / order-last

align

容器对齐（适用于 Flex/Grid）

justify-content: justify-(start/end/center/between/around/evenly/stretch)
align-content: content-(start/end/center/between/around/evenly/stretch)
align-items: items-(start/end/center/baseline/stretch)
justify-items: justify-items-(start/end/center/stretch)

项目自身对齐（适用于 Flex/Grid）

align-self: self-(auto/start/end/center/stretch/baseline)
justify-self: justify-self-(auto/start/end/center/stretch)

间距（适用于 Flex/Grid）

gap: gap-{size}
column-gap: gap-x-{size}
row-gap: gap-y-{size}

文本

自定义值

前缀	颜色值 → 属性	长度值 → 属性	数字值 → 属性	字符串值 → 属性
`text-`	`color`	`font-size`	-	-
`font-`	-	-	`font-weight`	`font-family`
`tracking-`	-	`letter-spacing`	-	-
`leading-`	-	`line-height`	`line-height`	-
`indent-`	-	`text-indent`	-	-
`decoration-`	-	`text-decoration-thickness`	-	-
`word-spacing`	-	`word-spacing`	-	-

原子类

color: text-(red-500/blue-700/gray-900/...)
font-size: text-(xs/sm/base/lg/xl/...)
font-family: font-sans / font-serif / font-mono
font-weight: font-(thin(100)/extralight(200)/light(300)/normal(400)/medium(500)/...)
font-style: italic / not-italic
text-align: text-(left/center/right/justify/start/...)
text-overflow: truncate / text-ellipsis / text-clip
line-height: leading-(none/tight/snug/normal/relaxed/...)
letter-spacing: tracking-(tighter/tight/normal/wide/wider/...)
white-space: whitespace-(normal/nowrap/pre/pre-line/pre-wrap/...)
word-break: break-(normal/words/all/keep)

只支持自定义值的原子类

text-indent: indent-
text-decoration-thickness: decoration-
word-spacing: word-spacing-

background

自定义值

前缀	颜色值 → 属性	长度值 → 属性
`bg-`	`background-color`	`background-size`

原子类

background-size: bg-(cover/contain)
background-position: bg-(center/top/bottom/left/right)
background-repeat: bg-(repeat/no-repeat/repeat-x/repeat-y)

CSS 自定义值的识别规则

Tailwind CSS 使用方括号 [] 语法时，会根据值的格式特征智能识别值类型，并映射到对应的 CSS 属性。

1. 颜色值（Color）

识别特征：

十六进制：#RGB、#RRGGBB、#RRGGBBAA
RGB/RGBA：rgb(r, g, b)、rgba(r, g, b, a)
HSL/HSLA：hsl(h, s%, l%)、hsla(h, s%, l%, a)
颜色关键字：red、blue、transparent、currentColor
CSS 变量（颜色）：var(--color-primary)

示例：

text-[#FF00FF] → color: #FF00FF bg-[rgb(255,0,0)] → background-color: rgb(255,0,0) border-[hsl(0,100%,50%)] →
border-color: hsl(0,100%,50%) text-[var(--my-color)] → color: var(--my-color)

2. 长度值（Length）

识别特征：

绝对单位：px、cm、mm、in、pt、pc
相对单位：em、rem、%、vh、vw、vmin、vmax
新单位：ch、ex、lh、rlh、dvh、svh

示例：

text-[14px] → font-size: 14px w-[50%] → width: 50% h-[100vh] → height: 100vh p-[2rem] → padding: 2rem gap-[1.5em] → gap:
1.5em

3. 数字值（Number）

识别特征：

纯数字（无单位）：0、1、100、450、1.5
用于 font-weight、opacity、line-height、flex 等

示例：

font-[450] → font-weight: 450 leading-[1.8] → line-height: 1.8 opacity-[0.5] → opacity: 0.5 flex-[2] → flex: 2 z-[100] →
z-index: 100

4. 字符串值（String）

识别特征：

单引号或双引号包裹：'string'、"string"
用于 font-family、content、grid-template-areas 等

示例：

font-['Arial'] → font-family: 'Arial' font-['Helvetica Neue',sans-serif] → font-family: 'Helvetica Neue', sans-serif
content-['★'] → content: '★'

5. 关键字值（Keyword）

识别特征：

CSS 预定义关键字：auto、none、inherit、initial、unset
特定属性关键字：center、flex-start、space-between 等

示例：

w-[auto] → width: auto m-[inherit] → margin: inherit justify-[space-between] → justify-content: space-between

6. 计算值（Calc）

识别特征：

calc() 函数表达式

示例：

w-[calc(100%-2rem)] → width: calc(100% - 2rem) h-[calc(100vh-64px)] → height: calc(100vh - 64px)

7. CSS 变量（CSS Variables）

识别特征：

var(--variable-name) 格式

示例：

text-[var(--primary)] → color: var(--primary) w-[var(--sidebar-width)] → width: var(--sidebar-width)

8. 特殊函数值

识别特征：

url()：图片、字体等资源
linear-gradient()、radial-gradient()：渐变
min()、max()、clamp()：数学函数

示例：

bg-[url('/image.png')] → background-image: url('/image.png') bg-[linear-gradient(to_right,#fff,#000)] →
background-image: linear-gradient(to right, #fff, #000) w-[min(100%,500px)] → width: min(100%, 500px)

常用属性举例

多值识别的前缀：这些前缀会根据值类型智能选择 CSS 属性：

前缀	颜色值 → 属性	长度值 → 属性	说明
`text-`	`color`	`font-size`	颜色或字号
`bg-`	`background-color`	`background-size`	背景颜色或背景尺寸
`border-`	`border-color`	`border-width`	边框颜色或宽度
`outline-`	`outline-color`	`outline-width`	轮廓颜色或宽度
`ring-`	`--tw-ring-color`	`--tw-ring-width`	环形颜色或宽度
`shadow-`	`--tw-shadow-color`	`box-shadow`	阴影颜色或阴影值
`decoration-`	`text-decoration-color`	`text-decoration-thickness`	装饰线颜色或粗细

font
- 字符串 -> font-family
- 数字 -> font-weight

单值映射的前缀：这些前缀只映射到固定的 CSS 属性：

前缀	映射属性	值类型
`tracking-`	`letter-spacing`	长度
`leading-`	`line-height`	长度/数字
`indent-`	`text-indent`	长度
`w-`	`width`	长度
`h-`	`height`	长度
`m-`	`margin`	长度
`p-`	`padding`	长度
`gap-`	`gap`	长度
`top-`	`top`	长度
`left-`	`left`	长度
`z-`	`z-index`	数字
`opacity-`	`opacity`	数字（0-1）
`scale-`	`transform: scale()`	数字
`rotate-`	`transform: rotate()`	角度（deg）
`translate-`	`transform: translate()`	长度

实际使用

群组（Group）- 父元素影响子元素

父元素添加 group 类，子元素使用 group-*: 变体响应父元素状态。

<!-- 卡片悬停时，内部元素同时响应 -->
<div class="group p-6 bg-white border shadow-lg rounded-lg hover:shadow-xl">
  <h3 class="text-xl font-bold text-gray-900 group-hover:text-blue-600">产品标题</h3>
  <p class="mt-2 text-gray-500 group-hover:text-gray-900">这是产品的简短描述</p>
</div>

效果：鼠标悬停在卡片上时，阴影加深，标题变蓝色，描述文本变深色。

兄弟元素（Peer）- 前面兄弟影响后面兄弟

前面的元素添加 peer 类，后续兄弟元素使用 peer-*: 变体响应其状态。

<!-- 输入框获得焦点时，提示文本变色 -->
<div>
  <input type="email" class="peer border-2 focus:border-blue-500" />
  <p class="text-gray-500 peer-focus:text-blue-500">请输入邮箱地址</p>
</div>

效果：输入框获得焦点时，下方提示文字从灰色变为蓝色。