先看问题

image.png

问题出现的原因

原因是我们使用了tailwindcss ，默认情况会有tailwindcss的默认属性

代码块内我们发现 background-color: transparent; 这个是默认属性导致的

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
<style>
button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

解决方案，禁止tailwindcss的默认属性

添加corePlugins对象，并设置preflight为false

修改文件 tailwind.config.js

module.exports = {
  ...
  ...
  corePlugins: {
    preflight: false
  }
}

效果

image.png

如果有问题可以联系我 wx: faith1314666