tailwindcss3.x Button 样式里面有个background-color: transparent;

1,221 阅读1分钟

tialwindcss升级到3.x之后,会影响其他UI库的按钮样式,

// tailwind 的代码
button[type='button'][type='reset'][type='submit'] {
    -webkit-appearance: button;
    background-color: transparent; // 就是它
    background-image: none;
}

解决办法:

在tailwind.css 里面加上 (附@layer的文档: 函数与指令 - Tailwind CSS 中文文档

@layer base {
    button, [type='button'], [type='reset'], [type='submit'] {
        background-color: var(--n-color); // 我用的是naive ui
    }
}

也可以参考下tialwind 的 github 的 lssues, 里面有很多人也遇到同样的 preflight button reset in v3 inconsistent with v2 · Issue #6602 · tailwindlabs/tailwindcss (github.com)