React和TailWind CSS：未应用动态生成的类

问题描述

我刚刚学习了Reaction和TailWind CSS，并且对使用TailWind类的CSS网格有过一次奇怪的体验。我已经制作了计算器的按钮，最后一个按钮横跨两列：

App.js：

export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-blue-400">
      <Calculator />
    </div>
  );
}

Calculator.js

import { IoBackspaceOutline } from "react-icons/io5";

export const Calculator = () => {
  return (
    <div className="grid grid-cols-4 grid-rows-5 gap-2">
      <Button>AC</Button>
      <Button>
        <IoBackspaceOutline size={26} />
      </Button>
      <Button>%</Button>
      <Button>÷</Button>
      <Button>7</Button>
      <Button>8</Button>
      <Button>9</Button>
      <Button>x</Button>
      <Button>4</Button>
      <Button>5</Button>
      <Button>6</Button>
      <Button>-</Button>
      <Button>1</Button>
      <Button>2</Button>
      <Button>3</Button>
      <Button>+</Button>
      <Button>0</Button>
      <Button>.</Button>
      <Button colSpan={2}>=</Button>
    </div>
  );
};

const Button = ({ colSpan = 1, rowSpan = 1, children }) => {
  return (
    <div
      className={`col-span-${colSpan} row-span-${rowSpan} bg-white p-3 rounded`}
    >
      <div className="flex items-center justify-center">{children}</div>
    </div>
  );
};

这不起作用(在Chrome中测试)：

现在来看奇怪的部分。我将从App组件返回的JSX替换为TailWind教程中的HTML，并再次将其删除。

<div className="bg-blue-400 text-blue-400 min-h-screen flex items-center justify-center">
  <div className="grid grid-cols-3 gap-2">
    <div className="col-span-2 bg-white p-10 rounded">1</div>
    <div className="bg-white p-10 rounded">2</div>
    <div className="row-span-3 bg-white p-10 rounded">3</div>
    <div className="bg-white p-10 rounded">4</div>
    <div className="bg-white p-10 rounded">5</div>
    <div className="bg-white p-10 rounded">6</div>
    <div className="col-span-2 bg-white p-10 rounded">7</div>
    <div className="bg-white p-10 rounded">8</div>
    <div className="bg-white p-10 rounded">9</div>
  </div>
</div>

在我多次按Ctrl-Z键之后，我只有前面的代码，我的按钮突然像预期的那样跨过了两列：

我检查以确保代码中没有任何更改：

我的朋友甚至克隆了my repo，按照同样的步骤，得到了同样的结果。他怀疑这与我的Button组件中与TailWind的JIT编译器相关的变量ClassNames有关，但我们谁也找不到错误。

我是否使用了错误的变量css类？

这是一个非常重要的时刻。这可能是什么原因？

推荐答案

TailWind生成的css文件将仅包括它在扫描您的代码时识别的类，这意味着不会包括动态生成的类(例如col-span-${colSpan})。

如果您只需要跨两列，则可以传递布尔值，该值将触发要添加的完整col-span-2或row-span-2实用程序类：

const Button = ({ colSpan = false, rowSpan = false, children }) => {
  return (
    <div
      className={`${colSpan ? 'col-span-2' : ''} ${rowSpan ? 'row-span-2' : ''} bg-white p-3 rounded`}
    >
      <div className="flex items-center justify-center">{children}</div>
    </div>
  );
};

否则，您可以将值作为类传递给Button组件：

<Button className='col-span-2 row-span-1'>=</Button>

const Button = ({ className, children }) => {
  return (
    <div
      className={`${className} bg-white p-3 rounded`}
    >
      <div className="flex items-center justify-center">{children}</div>
    </div>
  );
};

详细信息：https://tailwindcss.com/docs/content-configuration#dynamic-class-names

这篇关于React和TailWind CSS：未应用动态生成的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！