Next.js中Tailwind CSS base层button自定义样式不生效问题

问题现象 #

参照Tailwind文档在base层添加自定义基础样式，代码在Tailwind在线环境运行正常，但在Next.js ^13.5.3（Page Router）项目中出现异常：

• h3标签的自定义样式可正常覆盖默认样式
• button标签的bg-fuchsia-700无法覆盖Tailwind Base层默认的background-color: transparent;，始终显示透明背景
• 该问题在tailwindcss v3.3.3和v3.4.1版本中均存在

复现代码 #

CSS代码 #

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  h3 {
    @apply text-2xl bg-slate-200;
  }

  button {
    @apply bg-fuchsia-700
  }
}

页面代码 #

<h3>This is h3</h3>
<button>This is button</button>

解决方案 #

方法1：提升选择器特异性 #

通过增加选择器的特异性，确保自定义样式优先级高于Tailwind默认的Base样式：

@layer base {
  h3 {
    @apply text-2xl bg-slate-200;
  }

  button, button:not([class]) {
    @apply bg-fuchsia-700;
  }
}

方法2：直接编写CSS属性（不依赖@apply） #

跳过@apply直接在base层写原生CSS属性，避免可能的优先级解析问题：

@layer base {
  h3 {
    @apply text-2xl bg-slate-200;
  }

  button {
    --tw-bg-opacity: 1;
    background-color: rgb(126 34 206 / var(--tw-bg-opacity));
  }
}

方法3：临时使用!important（不推荐） #

若以上方法无效，可临时用!important强制覆盖（仅应急使用，不建议长期依赖）：

@layer base {
  h3 {
    @apply text-2xl bg-slate-200;
  }

  button {
    @apply bg-fuchsia-700 !important;
  }
}

原因分析 #

Tailwind Base层默认给button元素设置了background-color: transparent;，自定义base层的button选择器与默认选择器优先级完全相同。在Next.js的构建流程中，默认的Tailwind Base样式可能晚于自定义base样式注入，导致默认样式覆盖了自定义样式。通过提升选择器特异性或调整样式写法，即可解决该优先级冲突。

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