鱼梦江湖 @Yumengjh

简体中文

English

简体中文

English

外观

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 字号表

sizerempx
xs0.75rem12px
sm0.875rem14px
base1rem16px
lg1.125rem18px
xl1.25rem20px
2xl1.5rem24px
3xl1.875rem30px
4xl2.25rem36px
5xl3rem48px
6xl3.75rem60px
7xl4.5rem72px
8xl6rem96px
9xl8rem128px

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

rounded 圆角表

sizerempx
none0rem0px
sm0.125rem2px
(default) rounded0.25rem4px
md0.375rem6px
lg0.5rem8px
xl0.75rem12px
2xl1rem16px
3xl1.5rem24px
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 分成三层（按优先级从低到高）：

  1. base：全局基础（preflight、h1 等基础样式）
  2. components：组件类（更语义化）
  3. 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）。

动画与变换（Transform / Transition / Animation）

  • transform — 启用 transform（有些版本自动启用）。
  • translate-x-2 / -translate-y-1 — 平移。
  • scale-95 scale-100 scale-105 — 缩放。
  • rotate-45 rotate-90 — 旋转。
  • origin-center origin-top-left — 变换原点。
  • transition / transition-colors / transition-transform — 启用过渡。
  • duration-150 duration-300 — 持续时间（ms）。
  • ease-in ease-out ease-in-out。
  • animate-spin animate-pulse animate-bounce — 常用内置动画。

表单（常用）

  • appearance-none — 去默认浏览器样式（input/select）。
  • placeholder-gray-400 — placeholder 颜色。
  • focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 — 焦点样式组合（常用于 input）。
  • rounded-full px-3 py-2 border w-full — 常见 input 样式组合。

可访问性 & 实用小工具

  • sr-only — 屏幕阅读器可见、视觉上隐藏（隐藏文本但对读屏器友好）。
  • not-sr-only / visible。
  • cursor-pointer cursor-not-allowed — 鼠标指针。
  • select-none — 禁止文本选中。
  • pointer-events-none — 禁止鼠标事件。
  • list-disc list-decimal list-inside list-outside — 列表样式。

响应式前缀（常见断点）

  • sm: md: lg: xl: 2xl: — 例如 md:flex（中等及以上屏幕显示 flex）。
  • 可以组合：sm:text-sm md:text-base lg:text-lg。

组合/工程化常见写法（快捷记忆）

  • mx-auto （水平居中）
  • flex items-center justify-between （水平两端分布且垂直居中，常见 header）
  • px-4 py-2 rounded-md shadow （简单按钮/卡片基座）
  • grid grid-cols-3 gap-4 （三列网格）
  • w-full max-w-3xl mx-auto （中间容器）

插件/扩展（可能不是默认）

  • prose（typography 插件，适合论文/文章样式）。
  • line-clamp-3（文本折叠插件，line-clamp）。
  • aspect-w-16 aspect-h-9 / aspect-video（长宽比插件）。

这些需要在 tailwind.config.js 中开启或安装插件。