顺风错误：应为伪类或伪元素答案

【问题标题】：tailwind error: Expected a pseudo-class or pseudo-element顺风错误：应为伪类或伪元素
【发布时间】：2021-10-16 00:29:06
【问题描述】：

我已经为我的项目配置了 tailwindcss，但是在 npm run start 之后我收到以下错误。

(node:7032) UnhandledPromiseRejectionWarning: Error: Expected a pseudo-class or pseudo-element. at D:\projects\frontend\example1\src\styles\tailwind.css:5:3 指向下面的tailwind.css 文件。

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 中的脚本是

"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"
  },

什么可能导致这个错误？

【问题讨论】：

删除第5行和第9行focus:后面的空格
@DhilipH 将其添加为答案。我个人会赞成。这件事折磨了我一夜！ ????

标签： reactjs tailwind-css

【解决方案1】：

删除焦点后的空格：第 5 行，第 9 行。

@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;
}

当我在我很长的 css 文件中创建一个顺风基类时，我遇到了同样的错误，如下所示。但是，我没有伪类，也没有任何线索。事实证明，一个现有的类隐藏在我的文件中，并且类名的输入错误后跟一个“：”。因此，我认为当您从 tailwind 使用 @apply 并且文件中有一些“不明确”的冒号时，它会在 postCSS 的某些地方崩溃。

@layer base {
  h1 {
    @apply text-4xl py-3 font-semibold;
  }
  h2 {
    @apply text-3xl py-2 font-semibold;
  }
  h3 {
    @apply text-2xl py-1 font-semibold;
  }
}

...

.noDeco: {
    text-decoration: none;
}

【讨论】：