reactjs 为什么Tailwind动态类的值没有被编译并应用到元素中？

cmssoen2 于 5个月前发布在 React

关注(0)|答案(1)|浏览(50)

此问题在此处已有答案：

Why can't I pass variable as a className to tailwind-css?（1个答案）
4天前关闭。
我试图使一个网格的基础上，网格大小变量，我试图设置网格模板行和使用顺风变量。
但是类名不会被编译，而是我得到了带有方括号中的生成值的类名。

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;

字符串

的数据
而这里的类名是正确应用的，

的

reactjs

来源：https://stackoverflow.com/questions/77743222/why-dont-the-tailwind-dynamic-class-values-get-compiled-and-applied-to-the-elem

1条答案

按热度按时间

oo7oh9g91#

根据文件：
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>
  );

型

赞(0）回复(0）举报 5个月前

我来回答

reactjs 为什么Tailwind动态类的值没有被编译并应用到元素中？

1条答案

相关问题

热门标签

最新问答