TailwindCSS 3 类不会覆盖以前的类答案

【问题标题】：TailwindCSS 3 classes doesn't override previous classesTailwindCSS 3 类不会覆盖以前的类
【发布时间】：2022-07-07 12:10:09
【问题描述】：

我面临着一个在 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>

现在，当我在浏览器中检查它时，它显示了两种字体大小： Screenshot from the browser inspect

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

如您所见，这两个类都存在，都指的是字体大小，并且较大的类在较小的类之后。

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

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

这是为什么？

感谢您对此提供的任何帮助。谢谢

【问题讨论】：

我找不到在 tailwind 3 中支持此功能的公告。链接到文档？
不确定我是否理解菲利克斯的意思
我的意思是，我认为顺风 V3 不支持有意义的类顺序。因此，我想知道您为什么认为它受支持，以及您是否有指向有关该功能的文档的链接。
根据基本的CSS，一个接一个的样式会覆盖前面的样式。我测试了几次，Tailwind 3 生成类的新方式是，一旦你使用了某个类，它就会被添加到 commons.css 文件中，如果你使用另一个，它会在之后添加( !)，并且由于这个顺序，后一个 never(!) 可以覆盖前一个。示例：“.text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; }”
所以在上面的例子中，仅仅因为我先用了.text-4xl，然后用了.text-sm，所以.text-4xl永远不会覆盖.text-sm。

标签： css reactjs tailwind-css

【解决方案1】：

我建议您尝试 clsx 或 clsssnames 以便更好地使用顺风类而不是字符串插值

【讨论】：

我两个都试过了，没什么区别。看起来问题是，TailwindCSS 如何生成其 commons.css 文件，并将一个类置于另一个之上。例如，我注意到，那个类：“text-4xl”在css文件tailwind生成的类：“text-xl”之前，这就是它不覆盖的原因。但它会反过来工作。现在我只需要找到一种方法来让 Tailwind 3 以正确的顺序生成类。
我最终要做的是检查addClassName 中我想要覆盖的类，然后提供一个默认值。

【解决方案2】：

我找到了解决方案。在原始组件中使用默认 CSS 值设置 props，然后在使用上述组件时，如果我们需要不同的样式，我们只是在 props 中给出>.

【讨论】：

【解决方案3】：

引用redit

在 CSS 中，如果您有两个具有相同特性的选择器，则在 CSS 结构中最后的一个优先。类属性中的顺序没有影响。

建议的解决方案是在tailwindcss import 语句之后编写自己的类，或使用内联样式对其进行编辑。

我的个人提示：不要使用两个以相同 css 属性为目标的类，text-lg 和 text-4xg 都以 font-size 为目标，您需要一种方法（建议 clsx lib）只放置一个类名而不是另一个

import clsx from 'clsx';


let condition = false;

function Component(){


  return (
    <div>
     <p className={clsx({
       "text-lg": condition,
       "text-4xl": !condition,
     })}>
     ...
     </p>
    </div>
  );
}

【讨论】：

【解决方案4】：

我从dev.to找到了答案

总之，使用tailwind-merge 覆盖之前的类。

如果您担心捆绑包的大小，请查看tailwind-merge 中的捆绑包恐惧症的链接

【讨论】：