React 中 Tailwind 动态类值编译的问题[重复]

Question

我目前在尝试基于 Tailwind CSS 中动态生成的网格大小变量创建网格时遇到问题。当我使用变量设置 grid-template-rows 和 grid-template-columns 时，类名称不会按预期进行编译。相反，我得到的类名称中生成的值括在方括号中。

这是代码片段：

const App = () => {
  const gridSize = getGridSize();
  const players = getPlayers();
  // const numberOfPlayers = players.length;
  const activePlayer = getActivePlayer();

  const gridItems = Array(gridSize * gridSize)
    .fill(null)
    .map((_, index) => (
      <div
        key={index}
        className="bg-orange-300 rounded-lg w-16 h-16 cursor-pointer"
      ></div>
    ));

  return (
    <div
      className={`bg-[${players[activePlayer]}] w-[60vw] h-[100vh] mx-[20vw] flex justify-center items-center`}
    >
      <div className={`grid grid-rows-${gridSize} grid-cols-${gridSize} gap-2`}>
        {gridItems}
      </div>
    </div>
  );
};

export default App;

问题在带有方括号的生成类名中可见，如以下屏幕截图所示：

相反，当使用静态值时，类名称会正确应用，如以下屏幕截图所示：

请帮助我理解为什么这些带有 Tailwind CSS 变量的动态类值没有按预期编译。

Answer 1

根据文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

<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>

您可以考虑使用

style

属性，例如：

const App = () => {
  // …

  return (
    <div
      className="w-[60vw] h-[100vh] mx-[20vw] flex justify-center items-center"
      style={{ backgroundColor: players[activePlayer] }}
    >
      <div
        className="grid gap-2"
        style={{
          gridTemplateRows: `repeat(${gridSize}, 1fr)`,
          gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
        }}
      >
        {gridItems}
      </div>
    </div>
  );