如何在CSS文件中覆盖DaisyUI组件样式？

我想通过CSS覆盖部分DaisyUI组件样式，比如修改.input的font-size。我在components.css中添加了以下样式，但该样式会先加载，随后被DaisyUI的样式覆盖：

@layer components {
  .input {
    font-size: 20px;
  }
}

尝试将样式放到utilities.css中，虽然能覆盖DaisyUI样式，但HTML里无法使用text-2xl这类工具类。我的Tailwind配置导入顺序如下：

@import "tailwindcss/theme";
@import "./tailwind/tailwind-theme.css";

@import "tailwindcss/preflight";

@import "./tailwind/custom/base.css";
@plugin "daisyui" {
  styled: true;
  themes: light --default;
}

@import "./tailwind/custom/components/components.css";

@import "tailwindcss/utilities";
@import "./tailwind/custom/utilities.css";

方案1：提升自定义组件样式的选择器优先级 #

DaisyUI的.input样式同样属于components层，和你自定义样式权重一致，此时后加载的样式会生效。如果导入顺序没问题但仍被覆盖，可以把选择器改得更具体，确保你的样式能覆盖目标：

@layer components {
  .input[type="text"], .input[type="password"], .input {
    font-size: 20px;
  }
}

方案2：用自定义工具类避免冲突 #

如果不想调整选择器，可以在utilities.css中定义专属工具类，而非直接覆盖.input：

@layer utilities {
  .input-lg {
    font-size: 20px;
  }
}

之后在HTML中给input元素同时添加input input-lg类，既保留DaisyUI的组件样式，又能自定义字体大小，还不会影响text-2xl这类工具类的使用。

方案3：直接修改DaisyUI主题配置（推荐） #

最优雅的方式是在DaisyUI的主题配置中直接覆盖组件样式，无需额外编写自定义CSS。在tailwind.config.js中修改：

module.exports = {
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
          ".input": {
            fontSize: "20px",
          },
        },
      },
    ],
  },
}

这种方式优先级更高，不会和Tailwind工具类产生冲突，也符合DaisyUI的设计逻辑。

内容的提问来源于stack exchange，提问作者hubvill