skip to content
usubeni fantasy logo Usubeni Fantasy

怎么在任何项目使用 Tailwind CSS

/ 7 min read

coding , tailwindcss

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

Tailwind 随意链

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

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

<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，例如：

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

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

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：

Terminal window
npm install tailwindcss @tailwindcss/cli

在 CSS 文件里添加 Tailwind 样式：

@import "tailwindcss";

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

Terminal window
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 读取配置文件。

黑暗模式

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

@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"] *));

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

Layer

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

要完整理解 CSS layer 可以看 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; 的顺序逐层覆盖，如果 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 真香！

评论组件加载中……