tailwind error: Expected a pseudo-class or pseudo-element

user_5475733 0
Viewed 1460

I have configured tailwindcss for my project, however after npm run start I get following error.

(node:7032) UnhandledPromiseRejectionWarning: Error: Expected a pseudo-class or pseudo-element. at D:\projects\frontend\example1\src\styles\tailwind.css:5:3 which points to the below tailwind.css file.

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;

Scripts in package.json are

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

what could be causing this error ?

tailwind-css reactjs
2 Answers

Remove the space after focus: in lines 5, lines 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;
}

I have the same error when I make a tailwind base class in my very long css file as below. But, I have no pseudo class in it and have no any clue. It turn out that a existing class that hiding in my file and have a typing mistake of class name followed by a ":". So, I think it crash in some where in postCSS when you use @apply from tailwind and have some "un-clear" colon in your file.

@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;
}
user_166931830 
.row-input: {
    @apply inline-flex items-end w-full sm:items-stretch sm:flex-col sm:gap-y-[9px];
  }

In my case, a colon added after the class name was causing the error

user_192276600
Related