React项目引入Tailwind CSS覆盖原有样式问题及解决方法

问题表现 #

• 接入Tailwind CSS后项目原有样式被意外覆盖，典型异常为按钮默认背景变为透明
• 接入初衷仅为使用mb-3这类工具类作为样式快捷写法，未预期框架会主动修改原生元素默认样式

问题根因 #

该现象不属于个人配置操作错误，是Tailwind的默认机制导致：

样式冲突来源于Tailwind内置的preflight.css基础样式重置规则，当引入tailwindcss/base时，这套规则会被全局注入，用于抹平不同浏览器的原生元素默认样式差异，因此会覆盖项目原本依赖的浏览器默认样式，造成样式异常。

可通过简单操作验证该结论：注释掉tailwindcss/base的引入语句，仅保留组件层、工具层引入时，样式覆盖问题会直接消失，对应引入代码如下：

//@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

相关触发问题的preflight默认规则参考截图：

解决方案 #

无需手动注释base层引入，直接修改Tailwind配置文件，关闭内置的preflight重置规则即可：
打开项目根目录的tailwind.config.js，添加如下配置项：

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

配置保存后重启项目开发服务，即可正常使用Tailwind的工具类能力，不会再出现原有样式被默认重置规则覆盖的问题。

内容的提问来源于stack exchange，提问作者Aximili