不能使用带有REACT的变量选择Tailwincss类 [英] TailwindCSS classes not able to be chosen with variables with React

问题描述

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

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&q；)，则第二个示例可以起作用。显然，我想使用简明的选项，但它似乎只有在手动呈现每个选项后才起作用。我还尝试只呈现其中一个选项，在切换到不起作用的示例后，它将只呈现一个选项，而不呈现其他选项。

推荐答案

它与清除css的工作方式有关。

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

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

Check this answer too

这篇关于不能使用带有REACT的变量选择Tailwincss类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！