Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

/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 this issue Jul 4, 2023 · 8 comments · May be fixed by #19

Comments

@ghost
Copy link

ghost commented Jul 4, 2023

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

@mjbalcueva mjbalcueva linked a pull request Jul 14, 2023 that will close this issue
@jamie-michael
Copy link

jamie-michael commented Jan 13, 2024

same issue, anyone solve this?

@hugoPinho012
Copy link

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

@haikelareff
Copy link

so whats the solution here?

@hugoPinho012
Copy link

Delete tailwind.config.js

@DhruvRathod1
Copy link

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
Copy link

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
Copy link

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

@joonhoekim
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants