TailwindCSS 类无法通过 React 选择变量

Question

我有一个变量，我想用它来定义一个带有 TailwindCSS 的类：

const frac = // some integer between 0 and 12

使用此变量，该类定义将按预期工作：

className={
      (frac === 0 ? "w-0" : "") +
      (frac === 1 ? "w-1/12" : "") +
      (frac === 2 ? "w-2/12" : "") +
      (frac === 3 ? "w-3/12" : "") +
      (frac === 4 ? "w-4/12" : "") +
      (frac === 5 ? "w-5/12" : "") +
      (frac === 6 ? "w-6/12" : "") +
      (frac === 7 ? "w-7/12" : "") +
      (frac === 8 ? "w-8/12" : "") +
      (frac === 9 ? "w-9/12" : "") +
      (frac === 10 ? "w-10/12" : "") +
      (frac === 11 ? "w-11/12" : "")
    }

但这并不：

className={"w-" + String(frac) + "/12"}

事情变得奇怪的是，如果我首先使用工作示例，然后切换到在不停止程序的情况下不起作用的示例（本地重新运行“npm start”），则第二个示例可以工作。显然我想使用简洁的选项，但它似乎只有在手动渲染每个选项后才起作用。我还尝试仅渲染其中一个选项，并且在切换到非工作示例后，它将仅渲染该选项，而不渲染其他选项。

Answer 1

这与 Purge CSS 的工作原理有关。

简而言之，如果您检查 tailwind 配置文件中的路径来扫描 tailwind 类，然后扫描显示为子字符串的类，因此动态生成的类在您的情况下会失败。

因此，当您运行第一个程序并执行服务器时。tailwind 就像..哦，用户需要类，w-0所以我将保留它并将其添加到最终的输出文件中。但是 Purge CSS 无法执行 JS，因此无法计算可能用作类名的动态字符串。

也检查这个答案