tailwind working on my JavaScript file but not in my CSS file

Question

Im using tailwind CSS, when I want to take the code and add it to the CSS file it wont work although it's working normally when it's inside the js file here is what I mean this is my CSS file :

@tailwind base;
@tailwind components;
@tailwind utilities;

.input {
  @apply border rounded p-2 focus:outline-none w-full;
}
.show-pass {
  @apply absolute top-0 right-0 cursor-pointer h-full flex items-center bg-white border-y border-r pr-1;
}
.complete {
  @apply p-4 bg-transparent border-b-2 border-black-500 focus:outline-none placeholder:text-white focus:bg-white/40 transition duration-100 rounded-t-sm sm:w-1/4 placeholder:text-xl text-xl text-gray-100;
}

It worked fine when the .complete class wasn't added in this file, although it was in my js file. when I remove the .complete class from the CSS file and copy it exactly to the js file it works like this:

<input
            type="text"
            placeholder="Username"
            className="p-4 bg-transparent border-b-2 border-black-500 focus:outline-none placeholder:text-white focus:bg-white/40 transition duration-100 rounded-t-sm sm:w-1/4 placeholder:text-xl text-xl text-gray-100"
            required
          />

its giving me this error :

Compiled with problems:X

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(12:3) C:\Users\HP\Desktop\LIU(Hassan)\VS Code Programs\chat-app\src\index.css The `border-black-500` class does not exist. If `border-black-500` is a custom class, make sure it is defined within a `@layer` directive.

  10 | }
  11 | .complete {
> 12 |   @apply p-4 bg-transparent border-b-2 border-black-500 focus:outline-none placeholder:text-white focus:bg-white/40 transition duration-100 rounded-t-sm sm:w-1/4 placeholder:text-xl text-xl text-gray-100;
     |   ^
  13 | }

what is the problem and how to fix it? any help is appreciated, thanks.

Please show tailwind config

Konrad
– Konrad

2022-10-24 22:28:52 +00:00
Commented Oct 24, 2022 at 22:28 — Konrad
– Konrad, Commented Oct 24, 2022 at 22:28

leonnicklas · Accepted Answer · 2022-10-24 22:18:32Z

1

It pretty much says what's wrong:

The border-black-500 class does not exist. If border-black-500 is a custom class, make sure it is defined within a @layer directive.

Try replacing the css class border-black-500 with border-gray-500.
Note: the border-black-500 isn't a predefined tailwindcss class!

Hope this resolves your error:)
(If it does, please let me know and accept my answer)

answered Oct 24, 2022 at 22:18

leonnicklas

4731 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MASTER KOURANI Over a year ago

Omg, i feel dumb 🤣🤣

leonnicklas Over a year ago

I'm glad i could help:) Happens to everyone... 😂

Collectives™ on Stack Overflow

tailwind working on my JavaScript file but not in my CSS file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related