Ubuntu 20.04下npx运行tailwindcss构建命令报无效或意外标记如何解决

1. Node.js版本不兼容 #

你当前使用的npx 6.14.4对应Node.js 14.x版本，若安装的是Tailwind CSS v3及以上版本，过低的Node.js版本无法识别Tailwind依赖中使用的新JavaScript语法，会直接抛出Invalid or unexpected token报错。
解决步骤：

• 执行node -v查看当前Node.js版本
• 若版本低于16.x，将Node.js升级到16.x或18.x LTS版本，可通过nvm（Node版本管理工具）或Ubuntu官方维护的Node.js软件源完成升级，升级后重新执行编译命令验证。

2. 命令语法不匹配 #

Tailwind CSS v3已经废弃了原有的build子命令，旧语法在新版本中执行会触发异常。
解决步骤：

• 将原命令修改为如下格式即可：
  npx tailwindcss -i src/styles.css -o public/last.css
• 若需要实时监听文件变动自动编译，可添加--watch参数：
  npx tailwindcss -i src/styles.css -o public/last.css --watch

3. 依赖文件损坏 #

项目本地的node_modules目录存在文件缺失或损坏时，也会触发该类语法报错。
解决步骤：

• 执行如下命令清理旧依赖：
  rm -rf node_modules package-lock.json yarn.lock
• 重新安装项目依赖：
  npm install
• 再次执行编译命令验证。

内容的提问来源于stack exchange，提问作者javi-ur96