章
目
录
本文将以Tailwind 4.x版本为例，详细探讨如何在各种项目中使用它。需要注意的是，虽然Tailwind 4.x与3.x版本在配置上存在差异，但基本原理是相通的。
引入方式的考量
Tailwind官网提供了许多常见框架接入Tailwind的示例。然而，当项目未使用这些框架时，不少开发者可能会对如何引入Tailwind感到迷茫。有一种简单的方法是直接通过CDN引入整个Tailwind的所有样式，只需在HTML文件中添加如下代码：
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
不过，这种方式存在一些弊端。对于小型项目而言，引入的文件体积偏大，运行JavaScript时会产生额外开销，并且在与依赖Tailwind的框架进行集成时，兼容性方面也存在不可控因素。因此，在本文中，我们不考虑这种引入方式。
Tailwind的工作原理
要想在任意项目中成功使用Tailwind，理解其工作原理是关键。Tailwind的工作机制是通过扫描特定文件（在3.x版本中是在配置里指定的所有文件），利用正则表达式匹配其中所有有效的Tailwind类，然后生成最终的CSS文件。
正是基于这样的原理，在编写代码时，我们不能通过字符串拼接的方式来添加类。比如下面这种做法是不推荐的：
function Button({ color, children }) {
return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}
推荐使用变量到类的映射，以此保留完整的Tailwind类，示例如下：
function Button({ color, children }) {
const colorVariants = {
blue: "bg-blue-600 hover:bg-blue-500",
red: "bg-red-600 hover:bg-red-500",
};
return <button className={`${colorVariants[color]} ...`}>{children}</button>;
}
由于Tailwind的原理较为简单，从本质上来说，它对所使用的库或框架没有特殊要求。因此，在任何场景下，都可以借助Tailwind CLI来实现文件匹配和CSS生成。
在项目中使用Tailwind的具体步骤
（一）安装Tailwind和CLI
首先，在项目中安装Tailwind和Tailwind CLI，执行以下命令：
npm install tailwindcss @tailwindcss/cli
（二）添加Tailwind样式
在CSS文件中添加如下代码，引入Tailwind样式：
@import "tailwindcss";
这行代码就是Tailwind的核心，添加它之后，CLI就能将项目中用到的类注入到该CSS文件中。与3.x版本不同，4.x版本不再需要额外编写配置文件来添加主题色、扫描文件路径等。
（三）生成最终的CSS文件
安装和配置完成后，通过CLI生成最终的CSS文件，执行以下命令：
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
上述命令中，-i指定输入的CSS文件，-o指定输出的CSS文件，--watch表示开启监听模式，当源文件发生变化时会自动重新生成CSS文件。生成output.css后，将其引入项目，就完成了Tailwind的集成。
对于使用Vite、Next.js、SvelteKit等框架的项目，原理也是一样的，只不过这些框架通常会有插件或内置的postcss来帮助完成上述步骤。
Tailwind 4的配置
（一）配置集中化
在Tailwind 4中，配置主要集中在CSS文件里。像主题色、暗黑模式等配置都直接在CSS文件中编写，无需额外的配置文件。若需要读取以前的配置文件，则要在CSS文件中添加@config来读取。
（二）暗黑模式配置
在配置暗黑模式时，通常可以参考官网的方法：
@custom-variant dark (&:where(.dark, .dark *));
配置完成后，给顶层元素添加class="dark"，这样在使用dark:前缀时，就相当于在前面加上了配置的条件。例如：
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
同理，如果要在VSCode插件中适配暗黑模式，在CSS里添加如下代码即可：
@custom-variant dark (&:is([data-vscode-theme-kind="vscode-dark"] *, [data-vscode-theme-kind="vscode-high-contrast"] *));
按照同样的思路，还可以创建除亮色和暗色以外的多种主题。
（三）CSS layer的应用
Tailwind 4开始使用CSS layer，这是CSS的一个新特性，目前它的兼容性还不算太好，需要Chrome 99以上版本的浏览器才支持，即至少要是2022年发布的浏览器。简单来说，CSS layer给层叠样式表增加了一个宏观的层概念。
例如，Tailwind 4会自动生成如下的CSS layer：
@layer theme, base, components, utilities;
@layer theme {
/* 没什么特别的 CSS */
}
@layer base {
/* 没什么特别的 CSS */
}
@layer components {
/* 没什么特别的 CSS */
}
@layer utilities {
/* 没什么特别的 CSS */
}
CSS会按照@layer theme, base, components, utilities;的顺序逐层覆盖。如果这4个层中出现样式冲突，后面的层会覆盖前面的层。按照layer来组织CSS，可以让样式冲突的解决更加有条理。
总结与建议
Tailwind的工作原理是文件扫描和CSS生成，这使得它可以在任何项目中使用。Tailwind 4相较于之前的版本，在配置上更加简洁，所有配置都集中在CSS文件里，并且引入了CSS layer来缓解样式冲突问题。
当然，Tailwind也并非完美无缺。在使用过程中，可能会出现用button这类class作为标记识别元素时不够直观的情况。对此，可以通过组件化的方式来解决，组件名能更清晰地描述元素；也可以在Tailwind中自定义class，作为备用方案。
另外，Tailwind与AI代码生成的契合度较高，AI生成代码在一定程度上提高了Tailwind的使用率。
