reactjs - 顺风错误 : Expected a pseudo-class or pseudo-element

Question

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

(node:7032) UnhandledPromiseRejectionWarning:错误:需要一个伪类或伪元素。 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"
  },

可能导致此错误的原因是什么？

Answer 1

去除focus后的空格:第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 基类时，我遇到了同样的错误，如下所示。但是，我没有伪类，也没有任何线索。事实证明，隐藏在我的文件中的现有类存在类名后跟“:”的键入错误。所以，我认为当你使用来自 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;
}