美文网首页
使用tailwindcss与antd冲突,Button按钮透明

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

作者: 这个超人不会飞阿 | 来源:发表于2022-04-30 21:44 被阅读0次

先看问题

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

相关文章

网友评论

      本文标题:使用tailwindcss与antd冲突,Button按钮透明

      本文链接:https://www.haomeiwen.com/subject/eatuyrtx.html