Cirry's Blog

解决tailwindcss与前端框架的样式冲突问题

2022-10-21
技术
最后更新:2024-03-29
2分钟
286字

目前前端的几个组件库,比如ant-design,element-plus,navie-ui等等在安装tailwindcss之后,都会有一些样式冲突问题,比如button样式显示异常等等。 导致出现这个问题的原因都是tailwindcss的基础样式prelight.css覆盖了组件样式。

解决办法一

在vue中或者是其他框架中,如果你是全量引入的组件和组件样式,那你只需在引入组件样式之前引入tailwindcss样式即可。

解决办法二

如果你是vue用户,并且在vite中开启了自动的按需引入,可以按照下面步骤解决:

在项目根目录下找到tailwind.config.js文件配置中,添加如下几行:

1
module.exports = {
2
// ...
3
corePlugins: {
4
preflight: false,
5
},
6
// ...
7
}

然后在你的样式文件目录中创建prelight.css,并在https://unpkg.com/browse/tailwindcss@3.2.0/src/css/preflight.css将内容拷贝到你的文件中。

备注:将上述链接中的@符号后面的版本号,改成实际项目中使用的tailwindcss版本号。

最后在你的项目中引入prelight.css即可。

出现类似问题的github issue,想了解详细的可以去看看。

本文标题:解决tailwindcss与前端框架的样式冲突问题
文章作者:Cirry
发布时间:2022-10-21
版权声明:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
感谢大佬送来的咖啡☕
alipayQRCode
wechatQRCode