TailwindCSS - 避免清除生成类

Question

我想阻止 Tailwind 清除某些类。它们是在组件中生成的，例如。

className=`text-${size}`

Tailwind 不知道它会导致

text-sm

、

text-base

和

text-lg

，即使

size

变量是

的并集

type Size = "sm" | "base" | "lg";

是否可以在代码中其他地方不使用完整类的情况下实现这一目标？ 我找到的唯一解决方案是：

const sizeClass = size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base";
(...)
className={sizeClass}

Answer 1

尽管 Tailwind 不建议出于这个原因使用动态类，但如果将它们添加到 Tailwind 配置中的安全列表中，您仍然可以生成它们：

module.exports = {
  ...
  safelist: [
    'text-sm',
    'text-base',
    'text-lg'
  ],
  ...
}

您还可以使用正则表达式而不是单个字符串。有关更多信息，请参阅 https://tailwindcss.com/docs/content-configuration#safelisting-classes