小编Cso*_*zar的帖子

我面临着 CSS 世界中令人头疼的问题。TailwindCSS 3 类只是不会覆盖以前的类。

例如，我创建了这个组件：

import * as React from "react";

const TextBox = ({ addClassName, children }) => {
  const className = `text-xl leading-7.5 font-lato font-normal ${addClassName}`;
  return <div className={className}>{children}</div>;
};

export default TextBox;

然后我继续在另一个地方使用上面的这个组件，如下所示：

<TextBox addClassName="text-4xl">My New Text</TextBox>

现在，当我在浏览器中检查它时，它会显示两种字体大小： 来自浏览器检查的屏幕截图

class="text-xl leading-7.5 font-lato font-normal text-4xl"

正如你所看到的，这两个类都在那里，都指的是字体大小，并且较大的类在较小的类之后。

并且仍然只有小（原始）字体大小将占主导地位。

（作为旁注，我也尝试将addClassName变量放在前面，没有帮助）

为什么是这样？

我很感激任何帮助解决这个问题。谢谢