TailwindCSS 3 类不会覆盖以前的类

Question

我面临着 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变量放在前面，没有帮助）

为什么是这样？

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

Answer 1

我从dev.to找到了答案。\n您的代码不起作用的原因是：

\n

\n

事实证明，在浏览器计算 CSS 规则优先级时，class HTML 属性接受的以空格分隔的 CSS 类列表不会被视为列表。class 属性实际上包含元素具有的类集，因此顺序并不重要。

\n

\n

\n

由于类在类属性中出现的顺序并不重要，因此 CSS 样式表中后面出现的规则获胜。

\n

\n

此外，不能保证 CSS 样式表中的“text-4xl”是在“text-xl”之后定义的。

\n

所以为了解决这个问题，我建议使用tailwind-merge来覆盖以前的类。

\n

\n

Tailwind-merge 是一个实用函数，可以在 JS 中有效地合并 Tailwind CSS 类，而不会出现样式冲突。

\n

\n

它的特点之一是：最后一个冲突的班级获胜

\n

twMerge(\'p-5 p-2 p-4\') // \xe2\x86\x92 \'p-4\'

\n

Answer 2

我可能会迟到，但我们可以用来!将课程标记为重要。例如!text-4xl。

Answer 3

本质上，类属性中类的顺序并不重要；稍后定义 CSS 规则的类优先。有关此现象的更多信息，请参阅Tailwind CSS Github 存储库上的多个相同 CSS 类问题。

任意变体可用于增加生成的选择器的特异性，以允许始终应用后面的类。

例如，对于class="text-xl [&&]:text-4xl"( Playground )，text-4xl将应用于（与常规^{Playground 的}text-xl行为相反）。text-xl text-4xl

要再次覆盖它，只需添加更多与号 ( &)，例如class="text-xl [&&]:text-4xl [&&&]:text-3xl"( Playground ) 可以将最终文本大小设置为与 相同text-3xl。等等。

最后，在特殊情况下，!important修饰符可以应用于覆盖几乎任何其他内容。!这可以通过在类名前面添加来完成，例如class="text-xl !text-4xl". 请谨慎使用此选项，因为它会使样式难以在以后维护和修改。

另一种方法是使组件中的所有类具有较低的特异性，而不是使传递到组件中的样式具有较高的特异性。

这可以通过替换组件内可能被覆盖的所有类名来完成[:where(&)]:className。例如，class="[:where(&)]:text-xl text-4xl"将导致text-4xl应用该类。

Answer 4

我遇到了同样的问题，并且不想添加另一个依赖项并增加我的应用程序的包大小只是为了解决一些不必这么难的问题。所以我查看了顺风文档并发现了这一点：

\n

\n

使用组件层来添加您想要添加到项目中的任何更复杂的类，\xe2\x80\x99d 仍然希望能够使用功能类覆盖这些类。

\n

\n

@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n  .card {\n    background-color: theme(\'colors.white\');\n    border-radius: theme(\'borderRadius.lg\');\n    padding: theme(\'spacing.6\');\n    box-shadow: theme(\'boxShadow.xl\');\n  }\n  /* ... */\n}\n

\n

\n

通过在组件层中定义组件类，您仍然可以\n在必要时使用实用程序类来覆盖它们：

\n

\n

<!-- Will look like a card, but with square corners -->\n<div class="card rounded-none">\n  <!-- ... -->\n</div>\n

\n

尽管这意味着每次想要用预定义的类覆盖元素时都必须编写一个组件类。

\n

更新：

\n

现在有一种更简单的方法，使用tailwind-merge您现在可以实现此目的，而无需每次想要覆盖默认的类集时都创建一个组件。

\n

Answer 5

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