TailWind CSS 笔记

约 3158 字大约 11 分钟

2025-09-13

笔记

Tailwind 的类名大多是 属性-值 的形式，响应式/状态前缀放在最前面（例如 md:text-lg、hover:bg-blue-600）。负值用前缀 -（例如 -mt-4）。任意值可用方括号：w-[300px]。

数值

Tailwind 的数字本质是 rem，默认用一套 spacing scale（间距刻度），大部分 p-* / m-* / gap-* / space-x-* / w-* / h-* 这类后面的数字，默认都来自同一张表：

1 个单位 = 0.25rem
浏览器默认：1rem = 16px
所以：1 = 0.25rem = 4px
于是：4 = 16px，6 = 24px，8 = 32px…

这也是看到 Tailwind 到处都是 4 的倍数的原因：更好对齐、更好排版。

如果你改了根字号（比如 html { font-size: 18px }），那所有 rem 都会跟着变大，这是 rem 的特性。

2xl / 3xl / 4xl ... 是尺寸档位”。

text-2xl 里的 2xl 是字号档位

rounded-2xl 里的 2xl 是圆角档位

其它像 shadow-2xl、max-w-2xl、gap-2 等，各自都有自己的表

text-2xl / text-3xl ... 字体大小值：

text 字号表

size	rem	px
xs	0.75rem	12px
sm	0.875rem	14px
base	1rem	16px
lg	1.125rem	18px
xl	1.25rem	20px
2xl	1.5rem	24px
3xl	1.875rem	30px
4xl	2.25rem	36px
5xl	3rem	48px
6xl	3.75rem	60px
7xl	4.5rem	72px
8xl	6rem	96px
9xl	8rem	128px

注意：Tailwind 还会给每个字号配一个默认 line-height。

rounded 圆角表

size	rem	px
none	0rem	0px
sm	0.125rem	2px
(default) `rounded`	0.25rem	4px
md	0.375rem	6px
lg	0.5rem	8px
xl	0.75rem	12px
2xl	1rem	16px
3xl	1.5rem	24px
full	—	9999px（近似“无限大”）

颜色

颜色格式：{色系}-{深浅}

比如：slate-900、blue-500、emerald-600

色系：slate / gray / zinc / neutral / stone / red / orange / amber / yellow / lime / green / emerald / teal / cyan / sky / blue / indigo / violet / purple / fuchsia / pink / rose

深浅数字（默认）： 50 100 200 300 400 500 600 700 800 900 950 规律：数字越大越深。

50~200：很浅（背景/卡片）
400~600：主色常用（按钮/强调）
700~950：深色（文字/深色背景）

经验：500 是“标准色”，你想更深用 600/700，想更柔用 400。

用法：颜色要跟“属性前缀”配

同一个颜色可以用在不同地方：

背景：bg-slate-50、bg-blue-600
文字：text-slate-900、text-white
边框：border-slate-200
轮廓/焦点环：ring-blue-400
填充（svg）：fill-slate-400
描边（svg）：stroke-slate-400

透明度：/xx 或 opacity-*

Tailwind 很好用的一点：颜色后面直接加 / 透明度。

bg-black/50：黑色 50% 透明
text-white/80
border-white/10

这比 opacity-50 更常用，因为 opacity-50 会让元素里面的所有内容也一起变透明。

也可以直接写自定义颜色：[#hex]

bg-[#5E77C8]
text-[#111827]
border-[#E5E7EB]

也支持 rgb/hsl：

bg-[rgb(20,40,90)]
text-[hsl(210,70%,50%)]

主题

dark: 是 Tailwind 的“暗色模式变体”前缀：当页面处于暗色模式时，这条 class 才生效，用来覆盖默认（亮色）样式。

但是这样就要每个地方都要写两套颜色，每个元素都 bg-... dark:bg-... 会很烦。

推荐使用“语义色 token”

思路：你别在组件里写具体颜色，而是写“语义”：背景、文字、边框、卡片……，然后亮/暗两套在全局一次性定义。

全局 CSS（比如 assets/css/main.css）定义语义变量：

:root {
  --bg: 255 255 255;
  --fg: 15 23 42;     /* slate-900 */
  --card: 255 255 255;
  --border: 226 232 240; /* slate-200 */
}

.dark {
  --bg: 2 6 23;       /* slate-950 */
  --fg: 226 232 240;  /* slate-200 */
  --card: 15 23 42;   /* slate-900 */
  --border: 51 65 85; /* slate-700-ish */
}

用 Tailwind 的任意值引用：

<div class="min-h-screen bg-[rgb(var(--bg))] text-[rgb(var(--fg))]">
  <div class="border border-[rgb(var(--border))] bg-[rgb(var(--card))] rounded-2xl p-6">
    卡片
  </div>
</div>

这样你切换只需要一行：

document.documentElement.classList.toggle("dark")

组件里完全不需要写 dark:。

@layer utilities

@layer utilities 是“定义自定义类名”。区别在于Tailwind 不是普通 CSS 项目，它有“分层 + 生成顺序 + purge（删未用样式）”这些机制，所以用 @layer 写自定义类，会比随便写一段 CSS 更稳、更可控。

@layer utilities 是啥？

Tailwind 把最终 CSS 分成三层（按优先级从低到高）：

base：全局基础（preflight、h1 等基础样式）
components：组件类（更语义化）
utilities：工具类（p-4、text-sm 这类）

优先级（后者覆盖前者）是 base < components < utilities。

所以同样的选择器强度下（比如都是 .xxx），utilities 会覆盖 components，components 会覆盖 base。

@layer utilities { ... } 的意思就是：

“我写的这些自定义类，属于 utilities 这一层，放到最终 CSS 的 utilities 位置，跟 Tailwind 工具类一起工作。”

当然可以直接写普通 CSS，但 @layer 有几个“实际好处”，尤其在 Tailwind 项目里很值：

好处 A：确保顺序和覆盖关系正确

Tailwind 很看重“谁最后出现谁赢”。

放在 @layer utilities：你的类会出现在工具类层，覆盖行为更可预期
你随便写：可能被 Tailwind 的生成顺序/导入顺序影响，出现“为什么不生效/为什么被覆盖”的坑

举个直观例子：

/* 如果不在 layer 里，你写的 .btn 可能在文件里很靠前 */
.btn { padding: 16px; }

HTML：

<button class="btn p-2">...</button>

谁赢？取决于 CSS 里谁后出现、具体性等。而如果你把 .btn 放到 @layer components 或 utilities，你就能控制它属于哪一层，从而更稳定地决定“谁盖过谁”。

好处 B：Tailwind 的优化/裁剪（purge）更友好

现代 Tailwind 会根据你项目里用到的 class 生成/保留 CSS。

你用 @layer 写的类，属于 Tailwind 管理的体系，通常更不容易出现“构建后丢样式/顺序异常”的奇怪问题（尤其用 @apply 的时候）。

纯 CSS 当然不会被 purge “误删”，但在 Tailwind 工作流里，@layer 的内容会更符合 Tailwind 的处理方式（尤其结合 @apply）。

好处 C：你可以在里面用 @apply（这是大头）

Tailwind 的核心“高级用法”之一是：

@layer components {
  .btn {
    @apply rounded-xl px-4 py-2 font-semibold bg-slate-900 text-white hover:bg-slate-800;
  }
}

这让你既保留 Tailwind 的可组合性，又能抽出语义类（btn），减少模板里一大串 class。

直接写 CSS 也行，但你就要自己写 hover、focus、圆角、间距……而 @apply 能把 Tailwind 的现成工具类直接复用。

好处 D：更适合团队协作（约定清晰）

很多团队会约定：

@layer base：放 token（CSS 变量）、全局字体、背景
@layer components：放 btn/card/badge 这种语义组件类
@layer utilities：放很小的“语义工具”（如 .ui-muted、.ui-card）

自定义类具体的层

@layer base 放：全局基础、token、重置、默认字体等

@layer base {
  :root { --bg: 255 255 255; }
  html { font-family: system-ui; }
}

@layer components

放：语义组件类（button/card/input…）

@layer components {
  .btn-primary { @apply ...; }
  .card { @apply ...; }
}

@layer utilities

放：轻量工具（类似 Tailwind utilities 的辅助类）

@layer utilities {
  .ui-muted { color: rgb(var(--muted)); }
  .ui-card { background: rgb(var(--card)); border: 1px solid rgb(var(--border)); }
}

继承

子元素不会继承父元素的大多数布局类，比如：

padding / margin / border / width / height / background 一般不继承
会继承的典型是“文字相关”：color、font-family、font-size、line-height、text-align 等

所以常见的模式是：

父容器设 text-slate-900、font-sans，子元素默认吃到
但父的 bg-*、p-* 不会跑到子身上

（这也是为什么用 token 时，顶层放 text-[rgb(var(--fg))] 很舒服。）

媒体查询

响应式前缀（breakpoints）直接在类名前加 sm: md: 这些就行。

Tailwind 默认断点（min-width）

sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
2xl: ≥ 1536px

用法就是：移动端写默认类，往上用前缀覆盖。

布局基础

container — 居中并随着断点调整最大宽度（常用于页面容器）。例如：<div class="container mx-auto">
block / inline / inline-block — 显示类型。
hidden — display: none;
flex / inline-flex — flex 布局。
grid / inline-grid — grid 布局。
table / table-row / table-cell — 表格 display。
order-1 / order-last — flex/grid 中的项顺序。

Flex / Grid 常用

flex-row / flex-col — 主轴方向。
flex-wrap / flex-nowrap — 换行。
items-start items-center items-end items-stretch — 交叉轴对齐（align-items）。
justify-start justify-center justify-between justify-around justify-evenly — 主轴对齐（justify-content）。
gap-0 gap-1 gap-2 gap-4 gap-8 — 子元素间距，支持 gap-x-... / gap-y-...。
grid-cols-1/2/3/4/5/6 — 列数（grid-cols-3）。
col-span-2 / row-span-1 — 跨列/跨行。
place-items-center / place-content-center — 进一步简写对齐。

间距（Margin / Padding）

m-0 m-1 m-2 m-4 m-8 等 — 全边距（单位基于 Tailwind 预设 scale）。
mt-4 mr-2 mb-6 ml-3 — 上右下左分别设。
mx-auto — 左右自动（常用于水平居中）。
px-4 py-2 — x/y 方向内边距。
-mt-2 -mx-4 — 负 margin。
space-x-4 / space-y-2 — 同胞元素之间的间隔（flex/grid 时非常常用）。

大小（宽高）

w-full / h-full — 占父元素全部。
w-screen / h-screen — 占可视窗口。
w-auto / h-auto — 自动尺寸。
w-1/2 w-1/3 w-2/3 — 百分比宽度。
max-w-xs max-w-sm max-w-md max-w-lg max-w-2xl max-w-full — 最大宽度（常用于容器/卡片）。
min-h-screen / min-w-0 / max-h-96。
任意值：w-[300px]、h-[50vh]。

排版（Typography）

text-xs text-sm text-base text-lg text-xl text-2xl text-3xl 等 — 字号。
font-thin font-light font-normal font-medium font-semibold font-bold font-extrabold font-black — 字重。
font-sans font-serif font-mono — 字体族（基于 config）。
text-left text-center text-right text-justify — 对齐。
leading-none leading-tight leading-normal leading-loose — 行高（line-height）。
tracking-tight tracking-wide — 字间距（letter-spacing）。
truncate — 单行溢出省略号，常配 overflow-hidden whitespace-nowrap。
whitespace-normal whitespace-nowrap break-words / break-all — 换行策略。
text-gray-700 / text-white / text-red-500 — 文本颜色（颜色系列常见：gray/blue/red/green/yellow/pink/purple/... + shade）。

背景与颜色

bg-white bg-black bg-gray-100 bg-gray-800 bg-blue-500 等 — 背景色。
bg-gradient-to-r / bg-gradient-to-b + from- via- to- — 渐变背景（例如 bg-gradient-to-r from-blue-400 to-purple-600）。
bg-cover bg-contain bg-center bg-no-repeat — 背景图控制。
透明度: opacity-100/75/50/25 或者颜色斜线写法（在新版本/JIT 下）如 bg-blue-500/50（带 alpha）。
bg-transparent。

边框与圆角

border / border-0 / border-2 / border-t / border-b — 边框宽度及方向。
border-gray-200 / border-blue-500 — 边框颜色。
rounded-none rounded-sm rounded rounded-md rounded-lg rounded-full — 圆角。
ring-0 ring-1 ring-2 focus:ring-2 ring-blue-500 — ring（焦点环，常配合 forms/交互）。
outline-none — 去默认外轮廓（注意可访问性）。

阴影与效果（Effects）

shadow-sm shadow shadow-md shadow-lg shadow-xl — 盒阴影。
shadow-none。
filter blur-sm blur grayscale sepia contrast-125 saturate-150 等（需浏览器支持）。
mix-blend-normal / mix-blend-multiply。
drop-shadow（更适合图片/图标的阴影）。
opacity-75 opacity-50 — 透明度。

定位与层级

relative / absolute / fixed / sticky — 定位模式。
top-0 left-0 right-0 bottom-0 / inset-0 / inset-y-0 / inset-x-0 — 定位偏移。
z-0 z-10 z-20 z-50 — z-index。

溢出与滚动

overflow-auto overflow-hidden overflow-visible overflow-scroll。
overflow-x-auto / overflow-y-hidden。
scrollbar-hide（需插件或自定义）。

交互、状态类（伪类）

hover: 前缀（如 hover:bg-blue-600）
focus:（如 focus:outline-none focus:ring-2 focus:ring-blue-400）
active:（如 active:scale-95）
disabled: visited: checked: first: last: odd: even: 等
group + group-hover: 用于父子联动（例如 class="group" 的父元素下 group-hover:text-white）。