先看问题
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
