核心概念
理解和自定义 Tailwind 如何扫描你的源文件。
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 动态构造类名：
不要使用 props 动态构建类名
function Button({ color, children }) { return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}相反，将 props 映射到构建时可以静态检测到的完整类名：
始终将 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 文件中的文件node_modules 目录中的文件如果你需要扫描 Tailwind 默认忽略的任何文件，你可以 显式注册 这些源。
使用 @source 显式注册相对于样式表的源路径：
@import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib";当你需要扫描使用 Tailwind 构建的外部库时，这特别有用，因为依赖项通常列在你的 .gitignore 文件中并被 Tailwind 默认忽略。
Tailwind 默认将当前工作目录作为扫描类名的起始点。
要显式设置源检测的基路径，可以在 CSS 中导入 Tailwind 时使用 source() 函数：
@import "tailwindcss" source("../src");当处理由于构建命令从单个 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() 来生成带有变体的类。例如，为 underline 类生成 hover 和 focus 变体，向源输入中添加 {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 变体的生成。