在源文件中检测类名

概述

Tailwind 的工作原理是扫描您的项目以查找实用类，然后根据您实际使用的类生成所有必要的 CSS。

这确保了您的 CSS 尽可能小，并且也使得任意值等功能成为可能。

类名是如何检测的

Tailwind 将您的所有源文件都视为纯文本，并且不会尝试以任何方式实际解析您的文件作为代码。

相反，它只是查找您的文件中任何可能作为类名的标记，这些标记基于 Tailwind 期望在类名中出现的字符。

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 将您的源文件作为纯文本扫描，因此它无法理解您正在使用的编程语言中的字符串连接或插值。

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

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

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

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

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

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

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

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 值映射到不同的颜色色调

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 文件中的文件
• 二进制文件，如图像、视频或 zip 文件
• CSS 文件
• 常见的包管理器锁定文件

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

显式注册源

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

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

当您需要扫描使用 Tailwind 构建的外部库时，这尤其有用，因为依赖项通常列在您的 .gitignore 文件中，并且默认情况下会被 Tailwind 忽略。

设置您的基本路径

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

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

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

当您使用 monorepo 并且您的构建命令从 monorepo 的根目录而不是每个项目的根目录运行时，这可能很有用。

忽略特定路径

扫描类名时，使用 @source not 忽略相对于样式表的特定路径

@import "tailwindcss";
@source not "../src/components/legacy";

当您的项目中存在您知道不使用 Tailwind 类的大型目录时，例如旧组件或第三方库，这很有用。

禁用自动检测

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

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

这在具有多个 Tailwind 样式表的项目中很有用，您希望确保每个样式表仅包含每个样式表需要的类。

安全地列出特定实用类

如果您需要确保 Tailwind 生成某些在您的内容文件中不存在的类名，请使用 @source inline() 强制生成它们

@import "tailwindcss";
@source inline("underline");

.underline {
  text-decoration: underline;
}

安全地列出变体

您还可以使用 @source inline() 生成带有变体的类。例如，要生成带有 hover 和 focus 变体的 underline 类，请将 {hover:,focus:,} 添加到源输入中

@import "tailwindcss";
@source inline("{hover:,focus:,}underline");

.underline {
  text-decoration: underline;
}
@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}
@media (focus: focus) {
  .focus\:underline:focus {
    text-decoration: underline;
  }
}

使用范围安全地列出

源输入是大括号展开的，因此您可以一次生成多个类。例如，要生成所有带有 hover 变体的红色背景颜色，请使用范围

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

这将生成从 100 到 900（增量为 100）的红色背景颜色，以及 50 和 950 的第一个和最后一个色调。它还为每个类添加了 hover: 变体。

显式排除类

使用 @source not inline() 阻止生成特定类，即使在您的源文件中检测到它们也是如此

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

这将显式排除红色背景实用类及其 hover 和 focus 变体，使其不被生成。