tailwindcss 默认的button按钮样式导致其他ui库，如antd、element等透明失效问题的终极探讨

我先说一下好消息，这个问题在官方层面已经准备解决了，并且在当前版本（3.4.1）的下一个正式版彻底解决。

这里是原文：https://github.com/tailwindlabs/tailwindcss/pull/12735

但截至目前24.3.26日，仍然没发布新版。

官方的解决办法也很简单，就是降低优先级

原来的：

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
  }

改成了：

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
  }

--------------------

言归正传。

这个问题网上流传了很多歌解决办法，比如

直接覆盖样式。

关闭prefight  preflight: false

不引用 @tailwind base;

这些个办法虽然操作简单，但总是不完美，去掉了基础样式，会导致一些样式的缺失。覆盖样式，也会导致二次定义颜色。

所以，我使用了第四种方式，就是通过postcss插件处理

这是关键代码，大家自己使用的话改一下，原理就是查找样式并替换。

const plugin = (options) => {
    options = options || {}
    return {
        postcssPlugin: "postcss-antd-fixes-vue",
        Once: (root) => {
            root.walkRules((rule) => {
                if (rule.selector === `button,\n[type='button'],\n[type='reset'],\n[type='submit']`) {
                    rule.selector = `button,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit'])`
                }
            });
        }
    }
}




plugin.postcss = true;



export { plugin as default };

保存成插件给postcss引用就可以了。

nuxt用户，需要在这个插件之前，显式的引用tailwindcss插件，否则不会处理tailwindcss

postcss:{
    plugins:{
      tailwindcss: {},
     './extends/postcss-tailwind-fixes/plugin.mjs': {},
    }
  },