/styles/globals.css The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

Any ideas? Setup the template and then ran pnpm dlx shadcn-ui@latest init for the component.json.

[jamie-michael]

same issue, anyone solve this?

[hugoPinho012]

I had to delete the tailwind.config.js file as in this response: shadcn-ui/ui#214 (comment)

[haikalariffhalim]

so whats the solution here?

[hugoPinho012]

Delete tailwind.config.js

[DhruvRathod1]

If anyone ever encounters this error, I realized that I had both a tailwind.config.js and tailwind.config.ts in my repository at root level (I had forgotten to delete tailwind.config.js).

Deleting the redundant tailwind.config.js fixed it.

Hope this helps out!

[DhruvRathod1]

same issue, anyone solve this?

If anyone ever encounters this error, I realized that I had both a tailwind.config.js and tailwind.config.ts in my repository at root level (I had forgotten to delete tailwind.config.js).

Deleting the redundant tailwind.config.js fixed it.

Hope this helps out!

[JuanFerdevv]

I found the solution in this page https://ui.shadcn.com/docs/installation/manual

[joonhoekim]

As a first-time user of shadcn-ui, I encountered this error due to misconfiguring the tailwind.config.ts file.
I'm sharing my experience for other beginners like me.

If you're following this guide, I recommend double-checking your tailwind.config.ts file.
As mentioned in the comments above, the problem occurs when the configuration defining border-border is missing. If you have two config files, accidentally deleting the .js file could cause this issue.

If you're following the Next.js guide, make sure to include these lines as a child of the extend property. The default structure should be maintained.