运行TailwindCSS监听命令时出现Browserslist未知查询错误

问题描述 #

执行TailwindCSS编译监听命令：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

触发以下错误：

Error [BrowserslistError]: Unknown browser query var updateDb = require('update-browserslist-db'). Maybe you are using old Browserslist or made typo in query.
at unknownQuery (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:9235:14)
at Function.select (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:10055:19)
at /home/blutu/Coding/node_modules/tailwindcss/peers/index.js:9271:33
at Array.reduce ()
at resolve (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:9264:38)
at browserslist (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:9352:25)
at Browsers.parse (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:10192:16)
at new Browsers (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:10181:30)
at loadPrefixes (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:18241:24)
at Object.prepare (/home/blutu/Coding/node_modules/tailwindcss/peers/index.js:18251:26) {
browserslist: true
}

环境信息：Linux Mint系统，NodeJS 21（通过Nvm安装），已尝试切换NodeJS 18、重装tailwindcss、删除package.json和package-lock.json，问题未解决。

问题原因 #

Browserslist的配置文件中混入了Node代码片段var updateDb = require('update-browserslist-db')，被程序误识别为浏览器查询规则，导致报错。

解决方案 #

1. 检查并修复Browserslist配置文件

   • 查看项目根目录下的.browserslistrc文件，删除所有非标准浏览器查询的内容，保留合法规则示例：

     last 2 versions
     > 1%
     not dead
     

   • 若package.json中存在browserslist字段，确保其值为标准浏览器查询数组，示例：

     {
       "browserslist": [
         "last 2 versions",
         "> 1%",
         "not dead"
       ]
     }
     

2. 清理依赖并重装
   执行以下命令清理旧依赖并重新安装：

   rm -rf node_modules
   rm package-lock.json
   npm install
   

3. 重新执行监听命令
   再次运行TailwindCSS的监听命令：

   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
   

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