顺风错误：需要伪类或伪元素

Question

我已经为我的项目配置了 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"
  },

什么可能导致此错误？

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