Tailwind运行报错Expected a pseudo-class or pseudo-element原因查询

核心报错原因 #

你的@apply规则中，focus:修饰符和后续的工具类之间多了多余的空格，导致TailwindCSS解析器无法识别合法的伪类绑定规则，抛出Expected a pseudo-class or pseudo-element错误。
TailwindCSS要求修饰符（如focus:、hover:等）必须和后续绑定的工具类名紧连，不能插入空格。

具体需要修改的代码 #

你在tailwind.css文件中有两处错误写法：

• .input类下的focus: outline-none
• .btn类下的focus: outline-none

将两处的空格删除即可，修改后的完整tailwind.css内容如下：

@tailwind base;
@tailwind components;

.input {
  @apply focus:outline-none focus:border-gray-500 p-3 border-2 text-lg font-light border-gray-200;
}

.btn {
  @apply py-3 px-5 bg-gray-800 text-white font-semibold mt-3 rounded-lg text-lg focus:outline-none hover:opacity-90;
}

@tailwind utilities;

可选优化 #

你的package.json中start脚本使用了单&符号连接npm run tailwind:build和react-scripts start，在Windows环境下会导致Tailwind构建命令后台异步执行，可能出现构建未完成就启动React项目的问题，建议修改为双&&保证命令串行执行：

"scripts": {
    "tailwind:build": "npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/styles.css",
    "apollo:codegen": "rimraf src/__generated__ && apollo client:codegen src/__generated__ --target=typescript --outputFlat",
    "start": "npm run apollo:codegen && npm run tailwind:build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

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