ошибка попутного ветра: ожидается псевдокласс или псевдоэлемент

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, как показано ниже. Но у меня нет в нем псевдокласса и понятия не имею. Оказалось, что существующий класс, который прячется в моем файле, имеет опечатку в названии класса, за которым следует ":". Итак, я думаю, что где-то в postCSS происходит сбой, когда вы используете @apply от попутного ветра и в вашем файле есть "нечеткое" двоеточие.

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

Answer 2

      .row-input: {
    @apply inline-flex items-end w-full sm:items-stretch sm:flex-col sm:gap-y-[9px];
  }

В моем случае двоеточие, добавленное после имени класса, вызывало ошибку.