Create React App配置Tailwind后启动编译失败，模块解析错误如何解决？

报错是由于你使用的react-scripts@4.0.3内置的Babel版本不支持ES2021的数字分隔符语法，而Tailwind依赖的color包v4.1.0及以上版本的源码中使用了0.039_28这种带下划线的数字写法，导致Babel解析代码失败。

方案1：锁定color包兼容版本（改动最小，推荐） #

通过包管理器的版本覆盖规则，强制使用没有数字分隔符语法的color@4.0.1版本：

• 如果你使用npm >=8.3.0，在package.json中新增overrides配置：

{
  // 原有配置保留，新增下面这段
  "overrides": {
    "color": "4.0.1"
  }
}

• 如果你使用yarn，在package.json中新增resolutions配置：

{
  // 原有配置保留，新增下面这段
  "resolutions": {
    "color": "4.0.1"
  }
}

配置完成后删除项目的node_modules文件夹、package-lock.json或yarn.lock文件，重新执行安装命令npm install或yarn install即可。

方案2：升级react-scripts到v5版本（长期适配方案） #

react-scripts@5内置的Babel版本已支持ES2021语法，同时原生支持PostCSS8，不需要再使用PostCSS7兼容版的Tailwind：

1. 卸载旧版本相关依赖：

npm uninstall tailwindcss @tailwindcss/postcss7-compat postcss autoprefixer

2. 安装新版本依赖：

npm install react-scripts@latest tailwindcss postcss autoprefixer

3. 按照Tailwind官方最新的CRA配置说明调整对应配置文件，删除原有的PostCSS7兼容相关配置即可。
4. 删除锁文件和node_modules，重新安装依赖。

方案3：配置Babel转译color包（临时适配方案） #

如果不想调整依赖版本，可以在craco.config.js中新增配置，让Babel主动转译node_modules下的color包：

const path = require('path')

module.exports = {
  // 保留你原有的其他配置，新增下面的babel配置
  babel: {
    loaderOptions: (babelLoaderOptions) => {
      babelLoaderOptions.include.push(
        path.resolve(__dirname, 'node_modules/color')
      )
      return babelLoaderOptions
    }
  }
}

配置完成后重启项目即可。

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