旧版Node v10.15.3、npm 7.23.0的React项目安装TailwindCSS报错如何解决？

错误根因 #

你遇到的SyntaxError: Invalid or unexpected token报错，是因为当前版本Tailwind CSS依赖的color包使用了数值分隔符（0.039_28中的下划线）语法，该语法仅在Node.js v12.8.0及以上版本原生支持，你使用的Node v10.15.3不兼容该语法。

操作步骤 #

• 第一步：卸载已安装的不兼容Tailwind相关依赖

npm uninstall tailwindcss postcss autoprefixer

• 第二步：安装适配Node v10的指定版本依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat@2.0.4 postcss@^7 autoprefixer@^9

• 第三步：重新执行初始化命令，即可正常生成tailwind.config.js配置文件

npx tailwindcss init

后续配置说明 #

1. 项目根目录新增/修改postcss.config.js配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

2. 在项目全局CSS文件顶部引入Tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

完成以上操作后就可以在React项目中正常使用Tailwind CSS的相关样式能力。

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