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)