Tailwind CSS 指南

一、前言

1.1 文档背景

就 Tailwind CSS 官方文档来看，单单一个 核心理念 的知识点就够我们学习十数个小时了，所以为了配合教程，我们决定还是将深度知识点单拎出来讲解。

二、类名速查

本小节仅收录了 Tailwind v4.1 常用的实用类名作为一个简化列表方便查阅学习。如需了解完整的实用类名，请查阅 Tailwind CSS - 官方文档 - 布局 获取更多信息。

2.1 布局（layout）

2.2 弹性盒与网格（Flexbox & Grid）

2.3 间距（Spacing）

2.4 版式（Typography）

2.5 背景（Background）

2.6 边框（Border）

2.7 效果（Effects）

2.8 过滤器（Filters）

2.9 表格（Tables）

2.10 过渡和动画（Transitions & Animation）

2.11 变形（Transforms）

2.12 互动性（Interactivity）

2.13 SVG

2.14 状态，伪类与伪元素（States, pseudo-classes and pseudo-elements）

• 伪类：状态选择器

• 伪类：次序选择器

• 伪类：has() 与 not()

• Aria 与 Data 元素前缀类

• 媒体查询

• 指针设备

• 屏幕方向

• 功能支持

• 其他状态选择器

2.15 断点，媒体与容器查询（Breakpoints, media queries and contain queries）

• 最小宽度断点

• 最大宽度断点

• 容器查询断点

三、知识点

3.1 函数与指令（Functions and directives）

与官方文档顺序不同，这里先介绍一下 Tailwind CSS 文件中的各项函数与指令：

3.1.1 指令（Directives）

@import：引入一个文件，可以是 Tailwind CSS 本身：

代码已复制！
@import "tailwindcss";

@theme：规定一个主题层，包含了项目的自定义设计令牌，比如字体、颜色、断点等内容：

代码已复制！
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

@source：规定 Tailwind CSS 的输入源与排除路径：

代码已复制！
@source "../**/*.html";
@source not "../node_modules";

@utility：注册一个实用工具类：

代码已复制！
@utility tab-4 {
  tab-size: 4;
}

@variant：应用一项预定义变体：

代码已复制！
.my-element {
  background: white;
  @variant dark {
    background: black;
  }
}

@custom-variant：注册一个自定义变体：

代码已复制！
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

@apply：将 Tailwind CSS 定义的实用类名作为参数应用：

代码已复制！
.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}

具体使用方法将于下述小节中逐条讲解。

3.1.2 函数（Functions）

--alpha()：调整颜色不透明度：

代码已复制！
.my-element {
  color: --alpha(var(--color-lime-300) / 50%);
}

代码已复制！
.my-element {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

--spacing()：调整间距：

代码已复制！
.my-element {
  margin: --spacing(4);
}

代码已复制！
.my-element {
  margin: calc(var(--spacing) * 4);
}

与 calc() 结合使用时，对于任意值也非常好用：

代码已复制！
<div class="py-[calc(--spacing(4)-1px)]">
  <!-- ... -->
</div>

其默认值为 0.25rem(4px) ，如 .mt-4 {margin-top: 1rem}。

3.2 检测源文件中的类（Detecting classes in source files）

我们来一起理解 Tailwind CSS 是如何工作的，以及怎样设置能使 Tailwind CSS 的工作效率达到一个理想状态。

默认情况下 Tailwind 将扫描项目中的每个文件以查找类名，但默认排除下列文件：

• .gitignore 中声明的文件
• node_modules 目录下的文件
• 二进制文件如图像、视频或 zip 等
• CSS 文件
• 常见的包管理文件如 yarn.lock、package.json

由此我们可以进行显示注册源的设置，以我们刚才搭建好的 my-project/static 项目为例：

代码已复制！
static
├── fonts
│   └── ...
├── img
│   └── ...
├── styles
│   ├── globals.css # 输入文件
│   └── theme.css # 输出文件
├── index.html
└── tailwindcss

代码已复制！
@import "tailwindcss" source("../**/*.html"); 

上述代码意味着 Tailwind CSS 在引入时仅检测项目中所有的 HTML，如需忽略一些目录或文件也可直接在 .gitignore 中设置，Tailwind 会同步进行忽略。当然你也可以手动设置这些参数：

代码已复制！
@import "tailwindcss";
@source "../**/*.html";
@source not "../node_modules";

此外我们还可添加 source(none) 以禁用自动检测，这在具有多个 Tailwind 样式表的项目中非常有用，举例如下：

代码已复制！
@import "tailwindcss" source(none);
@source "../admin";
@source "../shared";

设置 Tailwind CSS 引入源对于大型项目的开发与构建效率而言尤为重要，对于本教程的 Next.JS 课程项目而言，我们仅需设置以下目录作为输入源：

代码已复制！
@import "tailwindcss";
@source "@/pages";
@source "@/components";

至此，Tailwind CSS 会将声明的源文件作为输入源，视为纯文本且不做代码解析，仅是基于 Tailwind 内建或自设的类名进行标记，然后对这些标记生成一个完整的 CSS 进行输出。这句话听起来比较绕，我们可以解释得接地气一点：

1. Tailwind CSS 会依据你设定好的源文件目录与类型作为输入源；
2. 输入的总是文字格式，Tailwind CSS 并不会做解析；
3. 仅当输入的文字包含某个实用类名时，这个类名才会被标记；
   • 比如你的输入里只有 relative 和 w-full 这两个类名，它就只标记这两个
4. Tailwind CSS 会将所有标记好的类名逐个生成样式，放在一个文件里输出。

由此可见调整输入源的范围与内容就变得极其重要：

代码已复制！
<span class="relative block w-full h-4"></span>

代码已复制！
...

@layer utilities {
  .relative {
    position: relative
  }

  .block {
    display: block
  }

  .h-4 {
    height: calc(var(--spacing)*4)
  }

  .w-full {
    width: 100%
  }
}

以官方的例子来说，动态构造类名或用 props 拼接类名将不能被 Tailwind CSS 检测到：

代码已复制！
function Button({ color, children }) {
  return (
    <div class="text-{{ error ? 'red' : 'green' }}-600">
      <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>
    </div>
  );
}

代码已复制！
function Button({ color, children }) {
  const colorVariants = {
    blue: "bg-blue-600 hover:bg-blue-500",
    red: "bg-red-600 hover:bg-red-500",
  };
  return (
    <div class="{{ error ? 'text-red-600' : 'text-green-600' }}">
      <button className={`${colorVariants[color]} ...`}>{children}</button>
    </div>
  );
}

前者由于本身不包含某个实用类名，输出文件中将不再包含这些 Tailwind CSS 实用类名，而后者则能正确生成。看到这里相信部分宝子会发现一个大问题，如果我们的输入源中不包含相关类名，但我们希望 Tailwind CSS 无论如何都要生成特定类名，又该如何操作呢？

3.2.1 保存特定类名（Safelisting specific utilities）

Tailwind CSS 使用 SafeList 参数来满足这一需求。有别于 Tailwind CSS v3 的一点是，v4 的 SafeList 不仅不存在于已弃用的 tailwind.config.mjs 文件当中，甚至连名称、使用方法对比前者都大相径庭。

Tailwind CSS v4 使用 @source inline("utilitie-name") 语法保存特定的类名，示例如下：

代码已复制！
@import "tailwindcss";
@source inline("underline");

代码已复制！
.underline {
  text-decoration-line: underline;
}

我们也可以为其添加参数，比如选择 :hover 与 :focus 两个状态：

代码已复制！
@import "tailwindcss";
@source inline("{hover:,focus:,}underline");

代码已复制！
.underline {
  text-decoration-line: underline;
}
@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
}
@media (focus: focus) {
  .focus\:underline:focus {
    text-decoration-line: underline;
  }
}

此外，它也可以取值为一个区间：

代码已复制！
@import "tailwindcss";
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

代码已复制！
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-red-100 {
  background-color: var(--color-red-100);
}
.bg-red-200 {
  background-color: var(--color-red-200);
}
/* ... */
.bg-red-800 {
  background-color: var(--color-red-800);
}
.bg-red-900 {
  background-color: var(--color-red-900);
}
.bg-red-950 {
  background-color: var(--color-red-950);
}
@media (hover: hover) {
  .hover\:bg-red-50:hover {
    background-color: var(--color-red-50);
  }
  /* ... */
  .hover\:bg-red-950:hover {
    background-color: var(--color-red-950);
  }
}

上述内容中的 bg-red-{50,{100..900..100},950} ，其 50 与 950 不言而喻，而中间的 100、900、100 则为从 100 到 900 递进 100。

3.2.2 排除特定类名（Explicitly excluding classes）

如果你不希望 Tailwind CSS 应用某个实用工具类，则可以使用 @source not inline() 进行排除：

代码已复制！
@import "tailwindcss";
@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");

3.2.3 引用检测逻辑

这里我们额外补充一点官方没有声明的情况： 引入文件引用了未引入文件，导致相关类名被检测并注入。 听起来有点绕口是吧，那假设我们有 ComponentA.js 和 ComponentB.js 这两个组件，直接上代码：

代码已复制！
@import "tailwindcss" source("../components/ComponentA.js");

代码已复制！
import { ModuleA, ModuleB } from "@/components/ComponentB"

return (
  <>
    <ModuleA data={data.moduleA} />
    <ModuleB data={data.moduleB} />
  </>
)

代码已复制！
const ModuleA = (data) => {
  return <span className="text-red-500"></span> // ✅ 会被识别，因为被父组件引用，且是完整声明
}

const ModuleB = (data) => {
  return <span className={`text-${data.textColor}-500`}></span> // ❌ 不会被识别，因为非完整显式声明
}

const ModuleC = (data) => {
  return <span className="bg-white"></span> // ❌ 不会被识别，因为没有被父组件引用
}

export { ModuleA, ModuleB, ModuleC }

这种情况下，由于 ModuleA 与 ModuleB 被 ComponentA 所引用，所以会被 Tailwind CSS 视作 ComponentA 源码需做编译的一部分。不过由于 ModuleB 中的类名并非完整的显式声明（使用了动态字符串拼接），所以不会被 Tailwind CSS 识别并输出；而 ModuleC 虽然有完整的类名 bg-white，但因为没有被 ComponentA 引用，所以也不会被扫描到。最终结果是只有 ModuleA 中的 text-red-500 被注入到输出的 CSS 文件中。

3.3 状态，伪类与伪元素（States, pseudo-classes and pseudo-elements）

以下是常见的状态、伪类与伪元素选择参考：

代码已复制！
<div>
  <!-- 标准 -->
  <span class="block"></span>
  
  <!-- 伪类 -->
  <!-- 伪类：状态 -->
  <span class="hover:block"></span>
  <span class="active:block"></span>
  <span class="checked:block"></span>
  <!-- 伪类：次序 -->
  <span class="first:block"></span>
  <span class="odd:block"></span>
  <span class="nth-3:block"></span>
  <span class="nth-last-of-type-6:block"></span>
  <!-- 伪类：has() 与 not() -->
  <span class="has-[a]:block"></span>
  <span class="has-checked:block"></span>
  <span class="not-invalid:block"></span>

  <!-- 伪元素 -->
  <span class="before:block"></span>
  <span class="after:content-['lorem ipsum']"></span>
  <span class="placeholder:italic"></span>
  <ul class="marker:text-lg"></ul>
  
  <!-- 媒体查询 -->
  <span class="md:block"></span>
  <span class="max-lg:block"></span>
  <span class="dark:block"></span>
  
  ...
</div>

请查阅 状态，伪类与伪元素（States, pseudo-classes and pseudo-elements） 了解所有前缀。 如欲查阅官方指南，详询 Tailwind CSS 官方文档 - 悬停，聚焦与其他状态 - 速查表 。

3.4 响应式设计（Responsive Design）

Tailwind CSS 正是在移动互联网时代下讲究小屏优先的主要推动力，因此与其相得益彰的设计稿也应从移动端扩展端点至平板端，我们的设计稿也遵循这一原则，且作为一个网站项目，我们得考虑到笔记本与台式机浏览的应用情景，所以需要将宽度进一步扩展到桌面端。

我们可以为先前示例里的卡片添加一些断点（md:...）：

代码已复制！
<div class="relative w-36 h-48 rounded-3xl border border-neutral-400 bg-[url('https://shorturl.at/ErgWw')] bg-center font-serif text-slate-700 transition duration-1000 ease starting:-translate-x-12 starting:opacity-0  md:w-48 md:h-64">
  <span class="absolute block h-full w-full rounded-3xl bg-linear-to-b from-neutral-200/0 from-33% via-neutral-200/75 via-67% to-neutral-200"></span>
  <div class="relative flex h-full flex-col justify-end p-4 md:p-6">
    <h4 class="font-bold md:text-lg">Title</h4>
    <p class="text-sm md:text-base">Lorem ipsum</p>
    <a href="javascript:void(0)" class="w-full px-2 py-1 mt-2 rounded-full font-sans font-medium text-xs text-center uppercase text-white bg-linear-to-r from-green-500/50 to-emerald-500 transition duration-300 ease hover:from-green-600/50 hover:to-emerald-600 md:px-3 md:py-1.5 md:mt-3 md:text-sm">View more</a>
  </div>
</div>

好的，现在我们会发现当屏幕宽度 ≥ 48rem（768px）之时，卡片的尺寸、内部盒模型与按钮的内边距、字体的大小以及按钮的上边距都明显变大了一些。

3.4.1 响应式设计：断点与媒体查询（Breakpoints and media queries）

让我们先了解一下预设的几个断点：

这些断点前缀作用于 Tailwind CSS 所有的实用类名，这意味着你可以为任何 HTML 元素按需配置合适的 CSS 样式，且无需撰写任何媒体查询代码块。

接下来，我们还可以定义一个 @media (max-width) 值，就像这样：

代码已复制！
<div class="w-60 max-sm:w-48"></div>

也就是说，上述 div 在屏幕宽度小于 40rem (640px) 时，宽度将设置为 192px。以下是官方对应的预设参数：

综合以上，如果你只想控制在一个范围区间，比如 max-width 从 768px ~ 1280px，那我们还可以这么写：

代码已复制！
<div class="w-60 md:max-xl:w-96 xl:w-full"></div>

这意味着上述盒模型会在 0 ~ 767px 视窗宽度下设定宽度为 15rem，并在 768 ~ 1279px 视窗宽度下设定宽度为 24rem，再在视窗宽度大于 1280px 时根据父级元素尺寸撑满宽度。当然你也可以采用一个自设值来临时限定宽度：

代码已复制！
<div class="w-60 md:max-[1080px]:w-96 xl:w-full"></div>

那么问题来了，我们该如何调整上述默认值呢？比如说我就想要修改默认的断点值，比如将 xs 调整为 30rem (480px) 而非 40rem (640px) ，或者增添新的断点呢？

请查阅 自定义主题 小节了解如何自定义。

3.4.2 响应式设计：容器查询（Container Queries）

作为一项现代 CSS 特性，我们可以根据父元素的大小而不是整个视图的大小来设置某些子元素的样式，而 Tailwind CSS 为我们提供简便的类名，就像这样：

代码已复制！
<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

与断点前缀一样，Tailwind CSS 在容器查询上总是移动端优先。所以上述内容等价于 .@container 在最小尺寸 >= 48rem 时，其 flex-direction 属性变更为 row。

此外，我们也可以为其添加 max-width 容器查询：

代码已复制！
<div class="@container">
  <div class="flex flex-col @max-md:flex-row">
    <!-- ... -->
  </div>
</div>

我们同样可以组合上述两者进行范围查询：

代码已复制！
<div class="@container">
  <div class="flex flex-col @sm:@max-md:flex-row">
    <!-- ... -->
  </div>
</div>

此外，如果我们有多个嵌套容器，我们还可以为容器命名以便于子元素选择。此外我们当然也可以使用任意值以及 cqw（容器查询宽度（Container query width），1cqw 即为查询容器宽度的 1%）：

代码已复制！
<div class="@container/main">
  <!-- ... -->
  <div class="@container/sub flex flex-row @sm/main:flex-col">
    <!-- ... -->
     <span class="w-full @min-[400px]/sub:w-[50cqw]">
  </div>
</div>

具体断点列表请查阅 断点，媒体与容器查询 。

3.5 颜色（Tailwind Colors）

Tailwind CSS 内建了一套颜色系统来实现色彩使用的统一，使开发者们得以简单、快速地将其应用到背景、边框、阴影等常见的参数中去，以下是一些例子：

代码已复制！
<div class="py-4 space-x-2">
  <span class="relative inline-block px-3.5 py-2 rounded-xl text-rose-100 border border-rose-300 bg-rose-900/75 shadow-xl shadow-rose-500/25 duration-300 ease hover:-translate-y-2 hover:shadow-rose-500/50">Example</span>
  <span class="relative inline-block px-3.5 py-2 rounded-xl text-sky-100 bg-sky-500/75 shadow-xl shadow-sky-500/25 inset-shadow-sm inset-shadow-sky-200/50 duration-300 ease hover:-translate-y-2 hover:shadow-sky-500/50 hover:inset-shadow-sky-200/75">Example 2</span>
</div>

Tailwind CSS v4 目前支持的色彩如下：

具体的写法如 decoration-violet-400/75 来设置一个名为 violet-400 的内置主题颜色，并将其透明度设置为 75%：这里是渲染结果。

此外我们可以访问 https://tailwindcolor.com/ 来实时获取 Tailwind Color，也可以访问 Tailwind CSS 官方文档 - 颜色 页面了解更多信息。

3.6 主题参数（Theme variables）

与需要在 v3 中设置 tailwind.config.mjs 不同，我们仅需在 v4 调用的 CSS 文件中引入 tailwindcss ，然后直接定义 @theme 中的内容即可。

3.6.1 默认主题参数

与 v3 不同的是，现在我们仅需在全局 CSS 文件 import Tailwind CSS 即可。这其中发生了什么？

代码已复制！
@tailwind base;
@tailwind components;
@tailwind utilities;

...

代码已复制！
@import "tailwindcss";

代码已复制！
@layer theme, base, components, utilities;
@import "./theme.css" layer(theme);
@import "./preflight.css" layer(base);
@import "./utilities.css" layer(utilities);

这里很好的解释 v3 升级到 v4 之后导入语句究竟做了些什么，显然作为主题层（layer(theme)）导入的 theme.css 的优先级较低，是可在外部根据 @theme{...} 代码块直接替换样式的，但在框架层面硬编码写死的类名如 flex-col 和 pointer-events-none 则是无法改动的。

3.6.2 自定义主题

我们可以直接在 @theme 层中增删改内置参数：

代码已复制！
@import "tailwindcss";

@theme {
  /* 覆盖断点 */
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;

  /* 删除断点 */
  --breakpoint-md: initial;

  /* 覆盖容器查询宽度 */
  --container-8xl: 96rem;
}

或是添加一个颜色与字体：

代码已复制！
@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
  --font-poppins: Poppins, sans-serif;
}

现在跟颜色有关的属性如 text-mint-500、bg-mint-500、border-mint-500 均已生效，而使用 font-poppins 则可以让元素使用 Poppins 字体。以下是官方支持自定义的全局变量：

如需了解整个默认主题变量，请参阅 Tailwind CSS 官方文档 - 默认主题变量参考 。

此外，你也可以把所有的断点与颜色都清空掉，再重新自定义：

代码已复制！
@import "tailwindcss";

@theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;

  --color-*: initial;
  --color-white: #fff;
  --color-purple: #3f3cbb;
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}

甚至你可以完全自设属于自己的主题，而不调用任何 Tailwind CSS 默认主题样式：

代码已复制！
@import "tailwindcss";

@theme {
  --*: initial;
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
  --color-coral: oklch(0.74 0.17 40.24);
  --color-driftwood: oklch(0.79 0.06 74.59);
  --color-tide: oklch(0.49 0.08 205.88);
  --color-dusk: oklch(0.82 0.15 73.09);
}

此外，我们还可以设置一些动画关键帧：

代码已复制！
@import "tailwindcss";

@theme {
  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
  @keyframes fade-in-scale {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

这样我们便可以在所需的元素上使用 animate-fade-in-scale 类名来实现动画。

补充一点：对应章节 3.2 检测源文件中的类 所讲解的内容，此处 @theme 中定义的类同样不会自动填充到输出文件，如果你总是需要 @theme 中的所有内容被输出，请使用 @theme static 。下例：

代码已复制！
@import "tailwindcss";
@theme static {
  --color-primary: var(--color-red-500);
  --color-secondary: var(--color-blue-500);
}

3.7 级联层（@layer）

此处与官方 Document 略有不同，我们将官方的 @layer 独立拆分出来做讲解。

时间来到 2022 年，为适配 W3C 官方推出的新标准，Chrome / Edge 99+、Firefox 97+ 及 Safari 15.4+ 均已支持 Cascade Layers 特性。而 Tailwind CSS 作为 CSS Framework 领域的领头羊及技术革新的推动者，自然也在第一时间适配了这一特性。

总的来说，@layer 规定了各层级的优先级，并有效地为混乱的选择器或分布式文件规范地做好分类。参照官方层命名约定，Tailwind CSS 使用下列层命名分别管理对应的内容并设定好了优先级：

以下是一个包含了各层应用标准的 CSS 示例：

代码已复制！
/* 引入 Tailwind CSS */
@import "tailwindcss";

/* 在 theme 层中定义 */
@layer theme{
  /* 移除所有内置行高，并设置主要与次要颜色 */
  --leading-*: initial;
  --color-primary: var(--color-sky-500);
  --color-secondary: var(--color-sky-800);
}

/* 在 base 层中定义 */
@layer base {
  /* 为所有 a 标签设置字体颜色为次要色 */
  a {color: var(--color-secondary);}

  /* 选择 section 标签 */
  section {
    /* 选择 section 标签下的指定标签，将部分标签的字体颜色设置为主要色，并为 h1 h2 设置字体大小 */
    h1, h2, h3, h4, p, span, li {color: var(--color-primary);}
    h1 {font-size: var(--text-2xl);}
    h2 {font-size: var(--text-xl);}
  }
}

/* 在 components 层中定义 */
@layer components {
  /* 选择 .card 类 */
  .card {
    /* 设置各个 css 样式 */
    content-visibility: hidden;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: --spacing(6);
    box-shadow: var(--shadow-xl);
    transition: .3s all ease;

    /* 应用 Tailwind CSS 命名规则中的变量值，如 :hover、:dark 等 */
    @variant hover {
      transform: translate-y(-.25rem);
    }
  }
}

/* 设置实用类 */
/* 注册名为 “content-auto“ 的类 */
@utility content-auto {
  content-visibility: auto;
}

上述提到过，级链层的优先级为 theme < base < component < utilities，所以在设置 .card.content-auto 类的元素时（即 class="card content-auto"），.content-auto 便会覆盖 .card 中的 content-visiblity 属性优先级，使其变为 auto 。

接下来会讲到 utilities 的具体管理，而 component 层的组件样式将于开发项目的过程中给出例子。

3.8 增设自定义实用工具类（Adding Custom Utitlites）

3.8.1 简单实用类名（Simple utilities）

我们继续来看这一例子：

代码已复制！
@utility content-auto {
  content-visibility: auto;
}

新增的实用类名和预定义实用类在使用方法上没有区别：

代码已复制！
<div>
  <!-- 常规 -->
  <span class="content-auto"></span>

  <!-- 状态伪类 -->
  <span class="hover:content-auto"></span>
  <span class="active:content-auto"></span>

  <!-- 媒体查询伪类 -->
  <span class="md:content-auto"></span>
  <span class="dark:content-auto"></span>
  
  ...
</div>

3.8.2 复杂实用类名（Complex utilities）

如果没有预定义的常用变量值（如 @variant hover），则仍需通过标准的嵌套语法添加至引入文件：

代码已复制！
@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

3.8.3 功能性实用类名（Functional utilities）

我们还可以注册接收传参的功能性实用类名，它们能接受以下几种参数输入：

关于各项功能实用类的注册方法，由于内容较长做成了折叠列表，请按需查阅理解。

代码已复制！
@theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
  --tab-size-github: 8;
}
@utility tab-* {
  tab-size: --value(--tab-size-*);
}

代码已复制！
@utility tab-* {
  tab-size: --value(integer);
}

代码已复制！
@utility tab-* {
  tab-size: --value(integer, ratio);
}

代码已复制！
@utility tab-* {
  tab-size: --value("inherit", "initial", "unset");
}

代码已复制！
@utility tab-* {
  tab-size: --value([integer], [percentage]);
}

代码已复制！
@theme {
  --tab-size-github: 8;
}

@utility tab-* {
  /* 请注意，以下三项是允许被同时添加到一个实用类名的 */
  tab-size: --value(integer); /* 使裸值支持整数类型，如 tab-size-6 */
  tab-size: --value([integer]); /* 使任意值支持整数类型，如 tab-size-[6] */
  tab-size: --value(--tab-size-*); /* 使值能勾匹配 @theme 中设置的以 --tab-size- 开头的所有自定义变量，如 --tab-size-github */
}

代码已复制！
@utility tab-* {
  /* 同时支持整数裸值、整数任意值与匹配的自定义变量，且解析顺序为 裸值 > 任意值 > 自定义变量 */
  tab-size: --value(integer, [integer], --tab-size-*);
}

代码已复制！
@utility opacity-* {
  opacity: calc(--value(integer) * 1%); /* 有需要计算的场景，calc(--value()) 必须单拎出来写 */
  opacity: --value([percentage]， --opacity-*);
}

代码已复制！
@utility inset-* {
  inset: --spacing(--value(integer));
  inset: --value([percentage], [length]);
}
@utility -inset-* {
  inset: --spacing(--value(integer) * -1);
  inset: calc(--value([percentage], [length]) * -1);
}

代码已复制！
@utility text-* {
  font-size: --value(--text-*, [length]);
  line-height: --modifier(--leading-*, [length], [*]);
}

3.8.4 添加自定义变体（Adding custom variants）

先前我们已经提到过一个运用于 .card 组件类名中的悬停变体（@variant hover {...}）。

对于常见的预定义变体如 :before、:hover、:active、:dark、:md 等，我们建议使用 @variant 属性代替 &: 属性，如使用 @variant before 而非 &:before。

但这里也有例外，比如考虑到兼容性问题的 -webkit- 前缀，Tailwind CSS 并没有自带这些变体，那我们可以为其手动设置：

代码已复制！
@custom-variant webkit-scrollbar {
  &:where(::-webkit-scrollbar) {
    @slot;
  }
}

/* 不需要嵌套时可以简写为 */
@custom-variant webkit-scrollbar (&:where(::-webkit-scrollbar));

/* 将该变体应用至对应的类名 */
@utility scrollbar-hidden {
  @variant webkit-scrollbar {
    display: none;
  }
}

如果需要选择包含某项参数的 HTML 元素，则参考下列内容撰写：

代码已复制！
@custom-variant theme-midnight {
  &:where([data-theme="midnight"] *) {
    @slot;
  }
}

/* 不需要嵌套时可以简写为 */
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

当自定义变体有多个规则时，它们可以相互嵌套：

代码已复制！
@custom-variant any-hover {
  @media (any-hover: hover) {
    &:hover {
      @slot;
    }
  }
}

3.9 样式重置（Preflight）

由于浏览器自带一些默认样式，所以开始定义样式前，有经验的前端都会引入一张预检样式表，比如 normalize.css 、 reset.css 之类。

理所当然的，Tailwind CSS 也会对页面进行预检。以下是 Tailwind CSS v4.1 的预检样式表：

代码已复制！
/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

3.10 前缀（Prefix）

我们可以通过在导入 Tailwind CSS 时添加 prefix() 参数以应用自定义前缀：

代码已复制！
@import "tailwindcss" prefix(tw);

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  /* ... */
}

代码已复制！
:root {
  --tw-font-display: "Satoshi", "sans-serif";
  --tw-breakpoint-3xl: 120rem;
  --tw-color-avocado-100: oklch(0.99 0 0);
  --tw-color-avocado-200: oklch(0.98 0.04 113.22);
  --tw-color-avocado-300: oklch(0.94 0.11 115.03);
  /* ... */
}

输出的所有参数都会应用自定义前缀，以避免代码冲突。

四、代码优化

优化 Tailwind CSS 实用类名顺序，使其兼具可读性、易维护性的同时尽可能降低性能开销。

4.1 优化实用类次序

首先让我们为实用类分类排序以易于阅读及维护，我个人倾向于在撰写期间就按照自己喜欢的顺序排序：

1. 命名、分组与去格式：自定义类名如 group, peer, appearance-*
2. 自身布局：flex-1, grow, shrink-*, self-*, justify-self-*, place-self, basis-*, col-span-*, row-start-*
3. 定位：static, absolute, relative, fixed, sticky
4. 容器、层级与混合：container, z-*, isolate
5. 布局与显示：flex, grid, block, inline, inline-block, hidden. float, clear, invisible
6. 容器配置：flex-row, flex-col, items-*, justify-*, content-*, gap-*, grid-cols-*, grid-rows-*
7. 尺寸与比例：w-*, h-*, size-*, aspect-* 及所有尺寸的 min / max 变体
8. 定位偏移：left-*, right-*, top-*, bottom-*, inset-*
9. 间距：p-*, m-* 及方向变体如 px-*, mr-* 等
10. 边框与圆角：border-*, rounded-*, ring-*, outline-*
11. 子元素间距：space-x-*, space-y-*, divide-x-*, divide-y-*
12. 排版：text-*, font-*, leading-*, tracking-*, line-clamp-*, whitespace-*, break-*
13. 背景与图片：bg-*, via-*, to-*, object-*
14. 效果与变换：shadow-*, opacity-*, origin-*, transform, scale-*, rotate-*, mix-blend-mode
15. 遮罩效果：blur-*, brightness-*, contrast-* 等所有的 filter 效果，以及对应的 backdrop-*
16. 交互：overflow-*, scroll-*, snap-*, touch-*, user-select-*, resize-*, cursor-*
17. 过渡与动画：transition-*, duration-*, animate-*
18. 状态修饰符：hover:*, focus:*, active:*, group:*, peer:*, nth-*:*
19. 响应式修饰符：sm:*, md:*, lg:*, xl:*, 2xl:*

梳理顺序有助于提升易读性，同时筛选出冲突类名以做删减（示例中 block 会被 flex 覆盖：

代码已复制！
mt-2 md:mt-4 w-full block opacity-50 flex rotate-45 absolute

代码已复制！
absolute flex w-full mt-2 opacity-50 rotate-45 md:mt-4

此外，如果你想像本章节 4.1.3 在线演练 小节中那样实现一键排序，我们推荐以下三种优化建议：

1. 使用 VSCode 插件 Headwind 进行自定义实用类排序
2. 使用 VSCode 插件 Prettier 进行代码自动格式化
3. 使用 Prettier 依赖进行排序

特性对比如下：

我们按照这个顺序讲解，不过无论你选用哪一种，格式化之前别忘了备份项目：

代码已复制！
# 进入目录
cd ~/Documents/my-project

# 将项目文件备份到 backup/nextjs
rsync -av --progress --exclude='node_modules' --exclude='.next' --exclude='build' nextjs/ backup/nextjs

4.1.1 VSCode 插件 Headwind

一个面向 Tailwind CSS 简单实用的格式化工具，唯一的缺点是任意值不支持，所以不推荐保存时自动格式化，而是按需使用。

直接在插件商店搜索 Headwind，在安装完毕后打开 VSCode 的 settings.json（按下⌘ / CTRL + ⇧ / SHIFT + P 然后输入 user settings json 并回车），按需新建对象并填充内容即可：

代码已复制！
...
// 可选，添加前缀判断，如果你有使用 @import "tailwindcss" prefix() 参数的话，这里需要对应填写
"headwind.customTailwindPrefix": "",

// 在保存时格式化，默认为 true
"headwind.runOnSave": false,

// 格式属性 Regex，此处对应 JSX TSX 中的 className 属性，默认格式 HTML、CSS、JavaScript、TypeScript、JSX、TSX ，识别 class、className 与 CSS 中的 @apply 属性
"headwind.classRegex": {
  "javascriptreact": "\\bclassName\\s*=\\s*[{\"'`]([^{\"'`]*)[\"'`}]",
  "typescriptreact": "\\bclassName\\s*=\\s*[{\"'`]([^{\"'`]*)[\"'`}]"
},

// 按照下列顺序排序，默认内容比较长，请访问 https://rainydesign.cn/blog/headwind-default-sort-order.json 查看
"headwind.defaultSortOrder": [
  "container",
  // ...
]

// 将自定义类名排序到 Tailwind Utilities 之前，默认为 false
"headwind.prependCustomClasses": true,

// 删除重复类名，默认为 true
"headwind.removeDuplicates": true
...

该插件的快捷键是：

• MacOS：⌘ + ⇧ + T
• Windows / Linux：CTRL + SHIFT + T

4.1.2 VSCode 插件 Prettier

最方便快捷的一个，直接搜索插件 Prettier 安装，格式化时选择 Prettier 即可。VSCode 格式化快捷键如下：

• MacOS：⇧ + ⌥ + F
• Windows / Linux：CTRL + SHIFT + F

很遗憾的是 Prettier 不支持自定义顺序，并且会顺带格式化其他内容，所以建议团队协作环境下使用。以下是 Prettier 的默认实用类名排序：

1. 布局：container, flex, grid, block, inline, hidden
2. 定位：absolute, relative, fixed, sticky, top-*, left-*
3. 尺寸：w-*, h-*, min-w-*, max-w-*
4. 间距：m-*, p-*, space-*
5. 排版：text-*, font-*, leading-*
6. 背景：bg-*
7. 边框：border-*, rounded-*
8. 效果：shadow-*, opacity-*
9. 过渡：transition-*, duration-*
10. 变换：transform, scale-*, rotate-*
11. 交互：cursor-*, select-*
12. 状态修饰符：hover:*, focus:*, active:*
13. 响应式修饰符：sm:*, md:*, lg:*, xl:*, 2xl:*

如果要清除默认格式化插件，请按下⌘ / CTRL + ⇧ / SHIFT + P 然后输入 user settings json，打开用户设置并清除相关内容：

代码已复制！
...
"[javascript]": { // 删除这个对象
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
...

4.1.3 使用 Prettier 依赖进行排序

使用 Prettier 依赖的好处是不进一步扩充 VSCode 插件库，并能在部署后于服务器端直接使用命令行格式化。让我们回到项目安装依赖：

# 使用 yarn 安装依赖
yarn add -D prettier prettier-plugin-tailwindcss # 或使用 npm 安装依赖：npm install -D prettier prettier-plugin-tailwindcss

# 然后在项目根目录下创建 .prettierrc 与 .prettierignore
touch .prettierrc .prettierignore

然后把下列内容粘贴进 .prettierrc：

代码已复制！
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "plugins": ["prettier-plugin-tailwindcss"]
}

再编辑项目根目录下的 .prettierignore ：

代码已复制！
# 依赖
node_modules
.pnp
.pnp.js

# 构建产物
.next
out
build
dist

# 缓存
.cache
.parcel-cache

# 日志
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 环境变量
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# 其他
.DS_Store
*.min.js
*.min.css
public/
coverage/

最后添加格式化到 package.json 之中：

代码已复制！
...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\""
  },
...

保存以上文件，再在终端中执行 yarn format:check 检查语法：

代码已复制！
yarn run v1.22.22
$ prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"
Checking formatting...
[warn] jsconfig.json
[warn] next.config.js
[warn] src/components/article/ArticleDynamicZone.js
[warn] src/components/blog/FeaturedArticles.js
[warn] src/components/course/Courses.js
[warn] src/components/course/SpecializedCourses.js
[warn] src/components/global/Background.js
[warn] src/components/global/CustomizedHead.js
[warn] src/components/global/Footer.js
[warn] src/components/global/Nav.js
[warn] src/components/global/Nav2.js
[warn] src/components/global/Subscription.js
[warn] src/components/home/Comparisons.js
[warn] src/components/home/GuideChapters.js
[warn] src/components/home/Playground.js
[warn] src/components/home/Frameworks.js
[warn] src/components/Layout.js
[warn] src/components/NestedLayout.js
[warn] src/components/shared/About.js
[warn] src/components/shared/ArticleCard.js
[warn] src/components/shared/ArticleCardContainer.js
[warn] src/components/shared/Information.js
[warn] src/lib/api.js
[warn] src/lib/formatDate.js
[warn] src/lib/markdown.js
[warn] src/pages/_app.js
[warn] src/pages/_document.js
[warn] src/pages/_error.js
[warn] src/pages/404.js
[warn] src/pages/500.js
[warn] src/pages/about.js
[warn] src/pages/blog.js
[warn] src/pages/blog/[...slug].js
[warn] src/pages/category/[slug].js
[warn] src/pages/course.js
[warn] src/pages/index.js
[warn] src/styles/globals.css
[warn] src/utils/handleFormSubmit.js
[warn] Code style issues found in 38 files. Run Prettier with --write to fix.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Prettier 会自动检查除 .prettierignore 声明以外的文件，上述报告显示它认为我们写的所有文件都有格式问题，不过我们仅需要格式特定的文件就行了，命令如下：

按照上述命令行提示按需格式化文件即可。

4.2 限定范围

通过减小范围避免撰写更多 class，缩短类名长度：

代码已复制！
class="
  group-has-peer-checked:bg-slate-50 
  group-has-peer-checked:shadow-xl 
  group-has-peer-checked:shadow-primary/12 
  lg:group-has-peer-checked:bg-none 
  lg:shadow-none 
  lg:group-has-peer-checked:shadow-none
"

代码已复制！
class="
  max-lg:group-has-peer-checked:bg-slate-50 
  max-lg:group-has-peer-checked:shadow-xl 
  max-lg:group-has-peer-checked:shadow-primary/12
"

4.2 提取重复样式组合

便于统一修改全局复用样式，增加可读性，但需注意避免过度抽象，仅对真正复用的样式使用 @apply：

代码已复制！
<div class="max-w-8xl mx-auto px-6 md:px-9 lg:px-18"></div>
<div class="max-w-8xl mx-auto px-6 md:px-9 lg:px-18"></div>

代码已复制！
@layer components {
  .customized-container {
    @apply max-w-8xl mx-auto px-6 md:px-9 lg:px-18;
  }
}

代码已复制！
<div class="customized-container"></div>
<div class="customized-container"></div>

4.3 向下控制优先

在父元素上汇总通用样式，既能减少子元素的重复定义，也便于统一修改继承或相关样式。因此，撰写 Tailwind 实用类时，请尽可能地采用 “自外而内、由上而下” 的组织顺序。

❌ Don't:

代码已复制！
<ul class="relative flex bg-neutral-200 rounded-lg">
  <li class="grow my-1 py-2 px-4 border-r border-neutral-600 text-neutral-900 text-center">Lorem ipsum</a>
  <li class="grow my-1 py-2 px-4 border-r border-neutral-600 text-neutral-900 text-center">Lorem ipsum</a>
  <li class="grow my-1 py-2 px-4 text-neutral-900 text-center">Lorem ipsum</a>
</ul>

✅ Do it:

代码已复制！
<ul class="relative flex justify-items-stretch py-1 bg-neutral-200 rounded-lg divide-x divide-neutral-600 text-center text-neutral-900">
  <li class="grow py-2 px-4">Lorem ipsum</a>
  <li class="grow py-2 px-4">Lorem ipsum</a>
  <li class="grow py-2 px-4">Lorem ipsum</a>
</ul>

可见实际渲染出来的视觉效果并无区别。

4.4 变形代替位移

position 属性会触发重排与重绘，而 transform 属性（translate）不影响文本流的情况下还会触发 GPU 加速，相比之下后者性能更好：

代码已复制！
left-2 top-6 duration-500 checked:top-0

代码已复制！
translate-x-2 translate-y-6 duration-500 checked:translate-y-0

4.5 限定动画类型

使用 transition-transform 限定过渡属性。duration-* 默认等同于 transition-all，会对所有可动画属性（如 padding、opacity）计算过渡，显式指定 transition-transform 可减少不必要的计算开销：

代码已复制！
translate-x-4 px-2 duration-300 hover:translate-x-0 md:px-4

代码已复制！
translate-x-4 px-2 transition-transform duration-300 hover:translate-x-0 md:px-4

五、原生 CSS 知识点

5.1 小技巧

内容仍在编辑，敬请期待

5.1.1 利用 border 画三角形

待撰写。