本文探讨了在使用 Tailwind CSS 和 clsx 等工具时，动态构建类名所面临的挑战。Tailwind CSS 依赖于静态分析来提取类名，因此动态生成的类名可能无法被正确识别。文章将介绍几种解决此问题的方法，包括使用完整的类名、安全地列出类名，以及转换内容文件。
在使用 Tailwind CSS 构建 React 或 Next.js 应用时，我们经常需要根据不同的条件动态地添加或修改元素的样式。clsx 和 tailwind-merge 这两个工具可以帮助我们更方便地管理类名，但当涉及到动态生成类名时，就会遇到一些问题。
Tailwind CSS 的工作原理是扫描项目中的文件，提取其中用到的类名，然后生成相应的 CSS 样式。这意味着，如果类名不是以完整的字符串形式出现在代码中，Tailwind CSS 就无法识别它们。
例如，以下代码无法正常工作：
立即学习“前端免费学习笔记（深入）”；
<div className={`text-${error ? 'red' : 'green'}-600`}></div>因为 Tailwind CSS 无法找到 text-red-600 和 text-green-600 这两个完整的类名。
那么，如何解决这个问题呢？
解决方案 1：使用完整的类名
最直接的解决方案是始终使用完整的类名，避免动态拼接。例如：
<div className={error ? 'text-red-600' : 'text-green-600'}></div>这种方法简单易懂，但在某些情况下可能会导致代码冗余。例如，当需要根据多个条件动态添加多个类名时，代码会变得难以维护。
解决方案 2：安全地列出类名 (Safelist)
Tailwind CSS 提供了 safelist 配置项，允许你手动指定需要包含在 CSS 中的类名。这可以解决动态生成类名的问题，但需要手动维护 safelist，并且需要在模板和 Tailwind 配置文件之间频繁切换，容易出错。
在 tailwind.config.js 中配置：
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
safelist: [
'text-red-600',
'text-green-600',
'hover:font-bold',
'md:w-1/2',
],
theme: {
extend: {},
},
plugins: [],
}然后，就可以像这样使用：
<div className={error ? 'text-red-600' : 'text-green-600'}></div>解决方案 3：转换内容文件
如果仍然希望使用动态生成类名的方式，可以考虑在 Tailwind CSS 扫描文件之前，对内容文件进行转换。这种方法比较复杂，需要使用自定义的转换器，将动态生成的类名转换为完整的类名。
例如，假设有以下代码：
import { cn } from '@/utils';
<Component className={cn(
"text-white text-sm",
"w-full h-10",
hover("font-bold text-lime-500"),
md(
"w-1/2 h-20",
"text-xl"
)
)}/>可以编写一个转换器，将其转换为：
import { cn } from '@/utils';
<Component className={cn(
"text-white text-sm",
"w-full h-10",
"hover:font-bold hover:text-lime-500",
"md:w-1/2 md:h-20",
"md:text-xl"
)}/>需要注意的是，这种转换只影响 Tailwind CSS 的类名提取过程，不会影响代码的实际运行。
总结
动态构建 Tailwind CSS 类名是一个常见的问题，但可以通过多种方式解决。选择哪种方法取决于具体的场景和需求。通常情况下，建议优先使用完整的类名，避免动态拼接。如果必须使用动态生成类名，可以考虑使用 safelist 或转换内容文件。但需要权衡这些方法的优缺点，选择最适合自己的方案。
在使用这些方法时，请务必仔细阅读 Tailwind CSS 的官方文档，了解其工作原理和最佳实践。这将有助于你更好地理解问题，并找到最合适的解决方案。
