Tailwind CSS 默认 Preflight 样式与组件库冲突的解决

478天前 · 技术 · 前端 · 411次阅读

最近在开发一个图床管理工具,能够兼容S3。前端开发用了 Vue3 + Element Plus + Tailwind CSS 的技术栈。前些时候开发了一个外包的学生管理系统,用的是腾讯的 TDesign + Tailwind CSS,所以我想切换应该还顺畅。

开发一段时间后,发现el-button的颜色不太对。默认下应该是蓝色的,结果过内部直接透明,看不到白色的字。

打开F12开发者工具,定位元素查看CSS样式,发现问题出在这段样式上。

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

通过工具定位到这段样式来自Tailwind CSS。因此猜想:这段样式来自Tailwind CSS的默认样式。Tailwind CSS 中会用诸如bg-blue-200为按钮指定颜色,因此这里默认会出现透明的情况。而在TDesign中t-button用了多个class定位,优先级高,所以没能出线这样的问题。

定位到问题后,查询Tailwind CSS官方文档,可以看到默认开启了preflight用于重置样式,因此在tailwind.config.js中加入如下代码禁用。

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

加入后,按钮确实不出现颜色丢失的情况了,但很多样式重置也消失了。例如border消失。因此,不能简单禁用。

官方文档中,所有的preflight样式都放在了tailwindcss/src/css/preflight.css中。直接修改这里的样式并重新启用preflight,发现并不生效,很有可能这里的css只适用于预览而不参与渲染。

重新思考后,我选择继续禁用preflight,并且修改这段css,在main.js中直接引入修改后的preflight.css

import 'tailwindcss/src/css/preflight.css'

为了使修改能同步到git中,可以使用patch-package生成补丁。

yarn add patch-package --dev
npx patch-package tailwindcss

这样,修改的内容就会生成补丁,其他设备同步时会apply。

👍 2

tailwindcss element-plus vue css conflict preflight

最后修改于90天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡

狗头

  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头

原神

  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神

小黄脸

  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸

目录

avatar

老班长

炼欲望为永恒

9

文章数

0

评论数

12

分类