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

Question

我刚刚学习 React 和 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 中测试）：

奇怪的部分来了。我用 Tailwind 教程中的 HTML 替换了 App 组件返回的 JSX，然后再次删除了它。

<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，按照相同的步骤得到了相同的结果。他怀疑这与关于 Tailwind 的 JIT 编译器的 Button 组件中的变量 classNames 有关，但我们 none 可以查明错误。

我使用变量 CSS 类错了吗？

这真是一个糟糕的时刻。这可能是什么原因？

Answer 1

Tailwind 生成的 CSS 文件将仅包含它在扫描您的代码时识别的 classes，这意味着动态生成的 classes（例如 col-span-${colSpan}) 将不包括在内。

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

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>
  );
};

否则，您可以将值作为 classes 传递给 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

Answer 2

另一个对我有用的棘手解决方案是使用具有可能 className 值（在打字稿中）的强制类型的变量，例如：

export type TTextSizeClass =
  'text-xl'  |
  'text-2xl' |
  'text-3xl' |
  'text-4xl' |
  'text-5xl' |
  'text-6xl' |
  'text-7xl' |
  'text-8xl' |
  'text-9xl'
;
...
const type : number = 6 ;
const textSizeClass : TTextSizeClass = type != 1 ? `text-${type}xl` : 'text-xl';
...
<div className={`font-semibold ${textSizeClass} ${className}`}>text</div>

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

React and Tailwind CSS: dynamically generated classes are not being applied

reactjs

tailwind-css

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

React and Tailwind CSS: dynamically generated classes are not being applied

reactjs

tailwind-css

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