设计系统：使用 TailwindCSS 覆盖样式

Question

我正在尝试使用 ReactJS 和 TailwindCSS 创建一个设计系统。

我创建了一个Button具有基本样式的默认组件，如下所示：

import React from "react";
import classNames from "classnames";

const Button = React.forwardRef(
  ({ children, className = "", onClick }, ref) => {
    const buttonClasses = classNames(
      className,
      "w-24 py-3 bg-red-500 text-white font-bold rounded-full"
    );

    const commonProps = {
      className: buttonClasses,
      onClick,
      ref
    };

    return React.createElement(
      "button",
      { ...commonProps, type: "button" },
      children
    );
  }
);

export default Button;

然后我在我的页面中使用Button：

import Button from "../src/components/Button";

export default function IndexPage() {
  return (
    <div>
      <Button onClick={() => console.log("TODO")}>Vanilla Button</Button>
      <div className="h-2" />
      <Button
        className="w-6 py-2 bg-blue-500 rounded-sm"
        onClick={() => console.log("TODO")}
      >
        Custom Button
      </Button>
    </div>
  );
}

这是显示的内容：

有些属性像 一样被覆盖，background-color但有些则没有（其余的）。

bg-blue-500原因是 TailwindCSS 提供的类是按照放置在 后面的顺序编写的bg-red-500，因此会覆盖它。另一方面，自定义按钮中提供的其他类是在基本按钮上的类之前编写的，因此不会覆盖样式。

这种行为发生在 TailwindCSS 中，但也可能发生在任何其他样式方法中，只要类顺序可以产生这种情况。

您有任何解决方法/解决方案来启用这种定制吗？

如果需要的话，这里有一个完整的CodeSanbox。

Answer 1

一种方法是使用层中的Tailwind 从组件中提取类。@applycomponents

/* main.css */

@layer components {
    .base-button {
        @apply w-24 py-3 bg-red-500 text-white font-bold rounded-full;
    }
}

// Button.js

const Button = React.forwardRef(({ children, className = "", onClick }, ref) => {
    const buttonClasses = classNames("base-button", className);

    // ...
);

这会将样式提取到新base-button类中，这意味着它们可以轻松地被传递给组件的实用程序类覆盖Button。

Answer 2

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

例如，在这种情况下，该类[&&]:py-2可用于覆盖该类中的样式py-3。要再次覆盖它，只需添加更多的与号 ( &)，例如[&&&]:py-0在前两个类之后添加该类将删除垂直填充。

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

有关出现此现象的原因的解释，请参阅多个相同 CSS 类问题。