如何用Tailwind CSS覆盖第三方导入样式？

核心原因分析 #

1. Tailwind工具类的优先级干扰
   Tailwind的utilities模块包含大量带!important的工具类，你当前将utilities放在custom.css之前，导致第三方样式先被Tailwind工具类覆盖，而custom.css的普通样式优先级不足以覆盖已被Tailwind修改后的规则。

2. 第三方样式的高优先级声明
   @navikt系列组件库的部分样式可能使用了!important或更具体的嵌套选择器（如.nav-header .btn），如果你的custom.css仅使用简单类选择器，优先级会低于第三方样式。

3. 导入顺序逻辑错误
   当前导入顺序让第三方样式加载在Tailwind组件/工具类之前，导致Tailwind的规则先覆盖第三方，后续custom.css只能针对Tailwind修改后的样式生效，而非直接覆盖第三方原始样式。

修复步骤 #

1. 调整CSS导入顺序（最关键） #

将第三方样式移到Tailwind核心模块之后，确保custom.css是最后加载的文件，这样它能直接覆盖前面的所有样式：

/* index.css 修正后顺序 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "@navikt/ds-css";
@import "@navikt/ui-common/styles/index.css";
@import "custom.css";

2. 提升自定义样式优先级 #

若调整顺序后仍不生效，针对目标样式使用更具体的选择器或必要时添加!important（优先用选择器提升，减少!important的使用）：

/* custom.css 示例 */
/* 方法1：更具体的选择器 */
.app-wrapper .nav-primary-btn {
  background-color: #ef4444;
}

/* 方法2：必要时使用!important */
.nav-primary-btn {
  background-color: #ef4444 !important;
}

3. 检查Tailwind内容扫描配置 #

确保tailwind.config.cjs包含第三方库的路径，避免Tailwind JIT编译器误删第三方类：

// tailwind.config.cjs
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@navikt/**/*.{css,js}"
  ],
  // 其他配置项...
}

4. 可选：禁用Tailwind工具类的!important #

如果不想依赖!important，可以在配置中关闭工具类的强制优先级：

// tailwind.config.cjs
module.exports = {
  important: false, // 默认值为false，若之前设为true需改回
  // 其他配置项...
}

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