怎么在任何项目使用 Tailwind CSS

注意，本文使用 Tailwind 4.x 版本为例，与 3.x 配置有差别，但基本原理一致。

Tailwind 随意链

Yes, indeed. Tailwind 官网给了很多常见框架接入 Tailwind 的例子，但是如果你根本没用上述框架呢？可能一下子就不知道怎么下手了。

此处不考虑直接通过 CDN 引入整个 Tailwind 所有样式的情况。如官网所提及的，只要一句：

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

但缺点肯定是有的，对于小项目来说体积稍大、运行 JavaScript 会有 overhead、对于依赖 Tailwind 的框架的兼容性影响也不可控，所以我们不考虑这种方法。

要解决这个问题自然需要从 Tailwind 的原理入手。解决了 Tailwind 是怎么从写 Class 到生成 CSS 就等于解决了怎么在任意情况下使用 Tailwind 的问题。

Tailwind 的原理

简单来说，Tailwind 是通过扫描特定文件（在 3.x 是你配置里限定的所有文件），用正则表达式匹配到所有有效的 Tailwind Class，然后生成最终的 CSS 文件，仅此而已，就是这么简单。

也正因为是使用正则表达式，我们不能通过字符串拼接的方式添加 Class，例如：

jsx 复制代码

function Button({ color, children }) {
	return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}

推荐使用变量到 Class 的映射，以保留完整的 Tailwind Class：

jsx 复制代码

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 CLI 做到匹配文件 + 生成 CSS。

首先安装 Tailwind 和 CLI：

bash 复制代码

npm install tailwindcss @tailwindcss/cli

在 CSS 文件里添加 Tailwind 样式：

css 复制代码

@import "tailwindcss";

是的没错，Tailwind 的本体就是这一句代码，添加了它，CLI 就能往这个 CSS 文件注入你用到的 Class。在 3.x 还需要写配置文件添加主题色、扫描文件路径等配置，4.x 则不需要。所以接着，我们可以直接通过 CLI 生成最终结果：

bash 复制代码

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

得到 output.css 后直接在项目引入就大功告成了。

如果你使用 Vite、Next.js、SvelteKit 等框架，原理也是如此，不过会有插件、或者内置的 postcss 帮你做这个步骤。

Tailwind 4 配置

在使用 Tailwind 4 时，配置会集中在 CSS 文件里，主题色、暗黑模式等配置都直接在 CSS 里写，不再需要额外的配置文件。

如果需要读取以前的配置文件，需要额外在 CSS 文件添加 @config 读取配置文件。

黑暗模式

一般来说官网会教你这么配黑暗模式：

css 复制代码

@custom-variant dark (&:where(.dark, .dark *));

然后给顶层元素添加 class="dark"，在使用 dark: 其实就相当于在前面加上了上面配的那个条件。

html 复制代码

<html class="dark">
	<body>
		<div class="bg-white dark:bg-black">
			<!-- ... -->
		</div>
	</body>
</html>

所以同理可得，如果你要在 VSCode 插件里也适配黑暗模式，直接在 CSS 里添加：

css 复制代码

@custom-variant dark (&:is([data-vscode-theme-kind="vscode-dark"] *, [data-vscode-theme-kind="vscode-high-contrast"] *));

再同理可得，你可以创造亮和黑以外的 N 套主题。

Layer

Tailwind 4 开始使用 CSS layer，这个 CSS 新特性现在兼容性还不算太好，Chrome 99 以上才支持，也就是至少得是 2022 年的浏览器才行。

要完整理解 CSS layer 可以看 CSS layer 完全指南，不过简单来说，就是层叠样式表，又给你加了一个宏观的层的概念。

例如 Tailwind 4 会自动帮你生成的 CSS layer：

css 复制代码

@layer theme, base, components, utilities;

@layer theme {
	/* 没什么特别的 CSS */
}

@layer base {
	/* 没什么特别的 CSS */
}

@layer components {
	/* 没什么特别的 CSS */
}

@layer utilities {
	/* 没什么特别的 CSS */
}

CSS 会按照 @layer theme, base, components, utilities; 的顺序逐层覆盖，如果 theme, base, components, utilities 4 个层出现了任何冲突，后面的层会覆盖前面的层。那么你按照 layer 来组织 CSS，冲突解决就很有条理了。

总结

Tailwind 的原理是扫描文件 + 生成 CSS，因此你可以在任何项目使用 Tailwind
Tailwind 4 开始不需要额外的配置文件，所有配置都在 CSS 文件里
Tailwind 4 开始使用 CSS layer，极大缓解了冲突问题

Tailwind 是真的越用越顺手，写起来一把梭，缺点也就是你有可能用 button 这样的 class 当作一个标记识别元素，在 Tailwind 里比较难看出来。不过自然也有解决的办法，首先是组件化，没有比组件名更清晰的描述了；其次你也可以在 Tailwind 定义 class，作为一个你真的不习惯的保底操作。

除此之外，Tailwind 跟 AI 生成的契合度也非常高。甚至可以说 AI 生代码间接推高了 Tailwind 的使用率，不过不管谁带火谁，Tailwind 这种浓缩 class 确实为模型节省了不少上下文长度，生成起来自然更准确高效。

简而言之一句话，Tailwind 真香！