检测源文件中的类 - 核心概念 - Tailwind CSS 中文文档

概述

Tailwind 通过扫描你的项目以查找实用类，然后生成所有必要的 CSS，基于你实际使用的类。

这确保了你的 CSS 尽可能小，并且也是使得像任意值这样功能成为可能的原因。

类是如何被检测的

Tailwind 将你的所有源文件视为普通文本，并且不试图以任何方式解析你的文件作为代码。

相反，它只查找你文件中可能是类的任何标记，基于 Tailwind 对类名中预期字符的判断：

JSX

export function Button({ color, children }) {
  const colors = {
    black: "bg-black text-white",
    blue: "bg-blue-500 text-white",
    white: "bg-white text-black",
  };
  return (
    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}>
      {children}
    </button>
  );
}

然后它试图为所有这些标记生成 CSS，丢弃任何不映射到框架所知道的实用类的标记。

动态类名

由于 Tailwind 将你的源文件视为普通文本，因此无法理解你正在使用的编程语言中的字符串拼接或插值。

不要动态构建类名

HTML

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的例子中，字符串 text-red-600 和 text-green-600 不存在，因此 Tailwind 不会生成这些类。

相反，请确保你使用的任何类名都完整存在：

始终使用完整的类名

HTML

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

如果你使用的是像 React 或 Vue 这样的组件库，这意味着你不应该使用 props 来动态构建类：

不要使用 props 动态构建类名

JSX

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

相反，将 props 映射到在构建时静态可检测的完整类名：

始终将 props 映射到静态类名

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>;
}

这还可以让你将不同的 prop 值映射到不同的颜色阴影，例如：

JSX

function Button({ color, children }) {
  const colorVariants = {
    blue: "bg-blue-600 hover:bg-blue-500 text-white",
    red: "bg-red-500 hover:bg-red-400 text-white",
    yellow: "bg-yellow-300 hover:bg-yellow-400 text-black",
  };
  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
}

只要你在代码中始终使用完整的类名，Tailwind 将每次完美生成你所有的 CSS。

哪些文件会被扫描

Tailwind 将扫描项目中每个文件的类名，除了以下情况：

在你的 .gitignore 文件中的文件
二进制文件，如图像、视频或压缩文件
CSS 文件
常见的包管理器锁文件

如果你需要扫描 Tailwind 默认忽略的任何文件，你可以显式注册这些源。

显式注册源

使用 @source 显式注册相对于样式表的源路径：

CSS

@import "tailwindcss";
@source "../node_modules/@acmecorp/ui-lib";

当你需要扫描一个使用 Tailwind 的外部库时，这一点尤其有用，因为依赖项通常列在你的 .gitignore 文件中，并且默认被 Tailwind 忽略。

设置基础路径

Tailwind 默认使用当前工作目录作为扫描类名的起始点。

要显式设置源检测的基础路径，在 CSS 中导入 Tailwind 时使用 source() 函数：

CSS

@import "tailwindcss" source("../src");

当在 monorepos 工作时，这可能很有用，因为你的构建命令从 monorepo 的根目录运行，而不是每个项目的根目录。

禁用自动检测

使用 source(none) 完全禁用自动源检测，如果你想显式注册所有源：

CSS

@import "tailwindcss" source(none);
@source "../admin";
@source "../shared";

在有多个 Tailwind 样式表的项目中，这可能很有用，在这些项目中，你要确保每个样式表仅包括每个样式表所需的类。