search

shadcn-ui / next-template

A Next.js 13 template for building apps with Radix UI and Tailwind CSS.
https://template.shadcn.com
1.35k stars 203 forks source link

/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. #18

Open ghost opened 1 year ago

ghost commented 1 year ago

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

jamie-michael commented 9 months ago

same issue, anyone solve this?

hugoPinho012 commented 9 months ago

I had to delete the tailwind.config.js file as in this response: https://github.com/shadcn-ui/ui/issues/214#issuecomment-1784191368

haikelareff commented 8 months ago

so whats the solution here?

hugoPinho012 commented 8 months ago

Delete tailwind.config.js

DhruvRathod1 commented 4 months ago

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 commented 4 months ago

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 commented 3 months ago

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

joonhoekim commented 2 months ago

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.