Next.js Discord

Discord Forum

Help with tailwind css not able to read utility classes

Unanswered
Norwegian Forest Cat posted this in #help-forum
Open in Discord
Avatar
Norwegian Forest CatOP
The problem, in the globals.cc file:
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

the border-border is showing error.
This is the error: Error: Cannot apply unknown utility class: border-border

What I did: I tried arbitrary values, but it just broke the whole UI. (the commented code in globals.css)

Here are the code files:
app/globals.ccs - https://codefile.io/f/GpcNP21wjU
tailwind.config.js - https://codefile.io/f/luAxSWFd42
tailwind version: "tailwindcss": "^4.0.7",

Anyone can help this fellow 🆘

8 Replies

Avatar
@Anay-208 | Ping on replies The file name is supposed to be `globals.css`and not `globals.ccs`
Avatar
Norwegian Forest CatOP
My bad, I typed it wrong. But it's correct in the code.
Avatar
Anay-208 | Ping on replies
Do you have a color border in your globals.css? and is this layer code after its declared?
Avatar
@Anay-208 | Ping on replies Do you have a color border in your `globals.css`? and is this layer code after its declared?
Avatar
Norwegian Forest CatOP
Man, I have no idea what you are asking. Frontend is not my forte.
I generated this whole project with "bolt .new" AI. So I don't know what it did.

You are talking about color border in globals.css. I do have this --border: 0 0% 89.8%; at @layer base { :root { .
I used arbitrary values for border-border and then got same error at bg-background

And thanks man for replying.
You can just try copy pasting the above message to bolt.new and it should be able to fix it
Avatar
Norwegian Forest CatOP
Okay, I see.
let me try that.