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

y1aodyip 于 2023-10-17 发布在 React

关注(0)|答案(5)|浏览(368)

我刚开始学习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，遵循相同的步骤，得到了相同的结果。他怀疑这与我的Button组件中关于Tailwind的JIT编译器的变量classNames有关，但我们中没有人能指出错误。
我使用可变CSS类错了吗？
这是一个WTF时刻。这可能是什么原因呢？

reactjs

来源：https://stackoverflow.com/questions/71063619/react-and-tailwind-css-dynamically-generated-classes-are-not-being-applied

5条答案

按热度按时间

qrjkbowd1#

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

赞(0）回复(0）举报 2023-10-17

8mmmxcuj2#

正如艾德·卢卡斯所说：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 package来“预生成”我们的动态样式。
使用tailwind-safelist-generator，您可以根据一组模式为主题生成safelist.txt文件。
Tailwind的JIT模式会扫描你的代码库中的类名，并根据找到的内容生成CSS。如果类名没有显式列出，例如text-${error？'红'：'绿'}-500，顺风不会发现的。为了确保生成这些实用程序，您可以维护一个明确列出它们的文件，例如项目根目录中的safelist.txt文件。

赞(0）回复(0）举报 2023-10-17

ct2axkht3#

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

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>

赞(0）回复(0）举报 2023-10-17

b1payxdu4#

可以使用内联样式。例如style={{ paddingLeft: width }}

赞(0）回复(0）举报 2023-10-17

yrefmtwq5#

我也有同样的问题...
是因为一个敢于将功能组件移出@/app/目录.
.然后我 * 只是返回文件 *，一切都正常了。

赞(0）回复(0）举报 2023-10-17