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
Where these classes come from? #214
Comments
That goes in your |
Yeah, already did that. But it's throwing a error in the error - ./src/styles/globals.css:1:1
@etop/nextjs:dev: Syntax error: /Users/rodrigoburigo/Documents/Projects/eTopocart/etopocart-turbo/apps/nextjs/src/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.
@etop/nextjs:dev:
@etop/nextjs:dev: > 1 | @tailwind base;
@etop/nextjs:dev: | ^
@etop/nextjs:dev: 2 | @tailwind components;
@etop/nextjs:dev: 3 | @tailwind utilities; |
I have encountered the same issue. |
This looks like an eslint issue… either you haven’t added the custom classes to tailwind config, or the eslint tailwindcss plug-in isn’t detecting your tailwind config file |
@MJtH so, that's my question. Where this classes are coming from so I can define them. I cannot find the definitions of these classes in the shadcn/ui docs either in TailwindCSS docs. So I guess must be a tailwind plugin? If so, what's the plugin? |
@digoburigo The classes (border-border, bg-background, etc) are defined in step 3, in your tailwind.config.js file https://ui.shadcn.com/docs/installation#configure-tailwindconfigjs |
Oh wow. I see, it's colors named |
So, to fix my issue, instead of putting the shadcn tailwindcss configuration in the UI package |
@digoburigo Are you using a tailwind prefix for |
I'm still unsure what configuration to change so |
@timidri Have you followed step 3 and added these options to tailwind.config? https://ui.shadcn.com/docs/installation#configure-tailwindconfigjs |
@MJtH Yes, I did. As a matter of fact, now
the rendering is done using the sans fontFamily. |
--font-sans is the Inter font You can use the below settings in Next JS, but change the --font-inter to --font-sans in the inter variable. https://beta.nextjs.org/docs/optimizing/fonts#with-tailwind-css |
If anyone else is having issues with this and none of the above worked, I found it's because I had a |
Sometimes such errors are caused by eslint. It can also happen sometimes when using Typescript. Leave a line or two of space in the tailwind.config.js file, then delete it and save it. Eslint is restarted and the error goes away. I got the same error and it was solved this way without doing anything . |
I can't believe the solution to fix this issue came exactly like @unxok comment! Thanks for saving my 8 hours of sleep! <3 |
I noticed that if you are using tailwind with custom prefix, then you also have to adjust those
then you also have to adjust those layer entries in your index.css like below
and then it's best to adjust utils.js so prefix is automatically applied (I don't know how to dig out the tailwind prefix automatically so I hardcoded it) EDIT: my bad, below code doesn't work well with tailwind, prefix is not properly recognized, I have to add prefix to "classes" directly inside component to make it work.If someone could guide me how to actually do it so I won't have to adjust all the component files.
|
I want to use CSS variable so whats the solution now? |
where is the step 3 you mention?? |
@haikelareff Check the For example, if your @layer base {
* {
@apply ui-border-border;
}
body {
@apply ui-bg-background ui-text-foreground;
}
} |
THIS WORKED THANKS!!! |
This worked for me |
Hi, i wanna share mi solution.Before start, so sorry for my bad english, and i am just learning web programming I used a fresh Astrojs install and after followed all the steps, step by step, in the Astro guide, i finally got 2 config files:
The only solution i got was: To delete the Replace the
to:
And:
as the guide says. So i got something like this in my
Finally rename the
Maybe this is a dumb comment but i guess may be useful for any new web dev who's learning for first time. |
In the documentation there is a code in the installation part in Configure styles section:
But where is defined these classes? I cannot find it in TailwindCSS either. Is there something I'm missing?
The text was updated successfully, but these errors were encountered: