第2世界
发布于 2023-05-02 / 20 阅读 / 0 评论 / 0 点赞

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

问题

使用tailwindcss会和已有的框架样式冲突,比如antd、rsuite,导致页面展现的样式出现问题,比如按钮透明。

解决方案

禁止tailwindcss的默认属性,添加corePlugins对象,并设置preflight为false,修改文件 tailwind.config.js

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

然后引入自己修改后的preflight.css:https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css

// 从第184行开始删除下面的内容
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

参考:https://juejin.cn/post/7084614555598323719


评论