目前前端的几个组件库,比如ant-design
,element-plus
,navie-ui
等等在安装tailwindcss
之后,都会有一些样式冲突问题,比如button
样式显示异常等等。
导致出现这个问题的原因都是tailwindcss
的基础样式prelight.css
覆盖了组件样式。
解决办法一
在vue中或者是其他框架中,如果你是全量引入的组件和组件样式,那你只需在引入组件样式之前引入tailwindcss
样式即可。
解决办法二
如果你是vue用户,并且在vite中开启了自动的按需引入,可以按照下面步骤解决:
在项目根目录下找到tailwind.config.js
文件配置中,添加如下几行:
然后在你的样式文件目录中创建prelight.css
,并在https://unpkg.com/browse/tailwindcss@3.2.0/src/css/preflight.css将内容拷贝到你的文件中。
备注:将上述链接中的@符号后面的版本号,改成实际项目中使用的tailwindcss版本号。
最后在你的项目中引入prelight.css
即可。
出现类似问题的github issue,想了解详细的可以去看看。