头图

使用tailwindcss与antd冲突,Button按钮透明

faith

先看问题

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对象,并设置preflightfalse

修改文件 tailwind.config.js

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

效果

image.png

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

阅读 549
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏