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

目前前端的几个组件库，比如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，想了解详细的可以去看看。