Cannot apply unknown utility class `border-border` - the `border-border` class does not exist per TailwindCSS; even if I manually define it as a class
The border-border class does not exist. If border-border is a custom class, make sure it is defined within a @layer directive.
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
* {
@apply border-border; /* [ERROR]: Cannot apply unknown utility class `border-border` */
}
body {
@apply bg-background text-foreground;
}
}
I don't know how this was happening. This was a React Next App with TailwindCSS the problem was happening in tailwind.config.js or globals.css.This is the global stylesheet for shadcn/ui & shadcn/vue. For those viewing this in 2025, the issue is likely that you're using Tailwind v4 with a tailwind.config.js file. ShadcnUI hasn't yet updated its installation documentation. The issue is that Tailwind v4.0 no longer detects Javascript config files automatically, but supports them for backward compatibility. To fix it, just replace: @tailwind base; @tailwind components; @tailwind utilities; with: @import "tailwindcss"; @config "../../tailwind.config.js"; The full file in this case is: @import "tailwindcss"; @config "../../tailwind.config.js"; @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } Conveniently, Tailwind v4.0 doesn't require all those @tailwind directives and loads with a simple @import "tailwindcss". For more information on upgrading check tailwindcss.com/docs/upgrade-guide. In the meantime, I'm sure shadcn/ui and shadcn/vue projects will fix this, and add updated installation instructions for TailwindCSS version 4.
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/5dd413ab4b9b0f0a8f092fc16c98048759f9863144de49435d0001a181e45eb3