Help with tailwind css not able to read utility classes
Unanswered
Norwegian Forest Cat posted this in #help-forum
Norwegian Forest CatOP
The problem, in the
the
This is the error:
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 🆘
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-borderWhat 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 🆘
10 Replies
@Anay-208 | Ping in replies The file name is supposed to be `globals.css`and not `globals.ccs`
Norwegian Forest CatOP
My bad, I typed it wrong. But it's correct in the code.
Do you have a color border in your
globals.css? and is this layer code after its declared?@Anay-208 | Ping in replies Do you have a color border in your `globals.css`? and is this layer code after its declared?
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
I used arbitrary values for
And thanks man for replying.
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.
@Norwegian Forest Cat 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.
I checked out your code, and you’re getting this error because the utility is unknown.
You haven’t defined the colour for border that’s why you’re getting the error.
You haven’t defined the colour for border that’s why you’re getting the error.
You can just try copy pasting the above message to bolt.new and it should be able to fix it
Norwegian Forest CatOP
Okay, I see.
let me try that.
Norwegian Forest CatOP
@Anay-208 | Ping in replies
Hey, I asked AI about it, and this is what I got:
https://codeshare.io/zlJzLb
Hey, I asked AI about it, and this is what I got:
https://codeshare.io/zlJzLb
This solution is for tailwind v3. Explicitly specify you’re using tailwind v4.
Ai are not the best at solving some types of problem.
To fix you can just use npx shadcn@beta init
Note: commit your changes as it’ll overwrite some files
And you might have to add few lines of code again
Ai are not the best at solving some types of problem.
To fix you can just use npx shadcn@beta init
Note: commit your changes as it’ll overwrite some files
And you might have to add few lines of code again