时间戳

首页 > 解决方案 > 顺风错误：应为伪类或伪元素

reactjs - 顺风错误：应为伪类或伪元素

问题描述

我已经为我的项目配置了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 文件。

顺风.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"
  },

什么可能导致此错误？

标签： reactjstailwind-css

解决方案

删除焦点后的空格：在第 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;
}

推荐阅读