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

Question

我刚刚学习 React 和 Tailwind CSS，并在使用 Tailwind 类的 CSS 网格方面有过奇怪的经历。我已经为计算器制作了按钮，最后一个按钮跨越两列：

\n

应用程序.js：

\n

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

\n

计算器.js

\n

import { IoBackspaceOutline } from "react-icons/io5";\n\nexport const Calculator = () => {\n  return (\n    <div className="grid grid-cols-4 grid-rows-5 gap-2">\n      <Button>AC</Button>\n      <Button>\n        <IoBackspaceOutline size={26} />\n      </Button>\n      <Button>%</Button>\n      <Button>\xc3\xb7</Button>\n      <Button>7</Button>\n      <Button>8</Button>\n      <Button>9</Button>\n      <Button>x</Button>\n      <Button>4</Button>\n      <Button>5</Button>\n      <Button>6</Button>\n      <Button>-</Button>\n      <Button>1</Button>\n      <Button>2</Button>\n      <Button>3</Button>\n      <Button>+</Button>\n      <Button>0</Button>\n      <Button>.</Button>\n      <Button colSpan={2}>=</Button>\n    </div>\n  );\n};\n\nconst Button = ({ colSpan = 1, rowSpan = 1, children }) => {\n  return (\n    <div\n      className={`col-span-${colSpan} row-span-${rowSpan} bg-white p-3 rounded`}\n    >\n      <div className="flex items-center justify-center">{children}</div>\n    </div>\n  );\n};\n

\n

这不起作用（在 Chrome 中测试）：\n

\n

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

\n

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

\n

在我按 Ctrl-Z 多次之后，所以我只有前面的代码，我的按钮突然按预期跨越两列：

\n

\n

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

\n

\n

我的朋友甚至克隆了我的 repo，遵循相同的步骤并得到了相同的结果。\n他怀疑这与我的 Button 组件中关于 Tailwind\ 的 JIT 编译器的变量 classNames 有关，但我们没有人能精确指出错误。

\n

我使用变量 CSS 类是否错误？

\n

这真是一个WTF时刻。这可能是什么原因？

\n

Answer 1

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

如果您只需要跨越 2 列，则可以传递布尔值，这将触发添加完整类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

Answer 2

正如艾德·卢卡斯所说： The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included

但现在可以使用safeListing

和 tailwind-safelist-generator 包来“预生成”我们的动态样式。

使用 tailwind-safelist-generator，您可以根据一组模式为您的主题生成 safelist.txt 文件。

Tailwind 的 JIT 模式会扫描代码库中的类名，并根据找到的内容生成 CSS。如果未明确列出类名，例如 text-${error ? 'red' : 'green'}-500，Tailwind 不会发现它。为了确保生成这些实用程序，您可以维护一个明确列出它们的文件，例如项目根目录中的 safelist.txt 文件。

Answer 3

对我有用的另一个棘手的解决方案是使用具有可能的 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>