Where these classes come from?

[digoburigo]

trafficstars

In the documentation there is a code in the installation part in Configure styles section:

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

But where is defined these classes? I cannot find it in TailwindCSS either. Is there something I'm missing?

[multiwebinc]

That goes in your globals.css file

[digoburigo]

Yeah, already did that. But it's throwing a error in the nextjs app. I'm using the t3 monorepo create-t3-turbo with a separated UI package containing the shadcn stuff

 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;

[timidri]

I have encountered the same issue.

[mikebuilds]

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

[digoburigo]

@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?

[mikebuilds]

@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

[digoburigo]

Oh wow. I see, it's colors named border, background and foreground applied to the TailwindCSS classes border, bg and text. Thanks, that was a little confusing 😅

[digoburigo]

So, to fix my issue, instead of putting the shadcn tailwindcss configuration in the UI package tailwind.config I put in the tailwind config package of the monorepo and used the presets prop in both tailwind.config of the UI package and the NextJS app

[Sridatta19]

@digoburigo Are you using a tailwind prefix for tailwind.config of UI package (as suggested in the with-tailwind example)?

[timidri]

I'm still unsure what configuration to change so @apply border-border; and the default font configuration work. Can anyone provide a pointer please?

[mikebuilds]

@timidri Have you followed step 3 and added these options to tailwind.config?

https://ui.shadcn.com/docs/installation#configure-tailwindconfigjs

[timidri]

@mjth Yes, I did. As a matter of fact, now @apply border-border; does not give an error anymore for some reason. The only issue I still have is that "var(--font-sans)" doesn't work and makes everything render using the default browser font. If I remove that variable like so:

      fontFamily: {
        // sans: ["var(--font-sans)", ...fontFamily.sans],
        sans: [...fontFamily.sans],
      },

the rendering is done using the sans fontFamily.

[mikebuilds]

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

[elidotexe]

I faced the same error but couldn't grasp the solution mentioned by others above. To resolve the issue, you can select the 'no' option for CSS variables when executing the npx shadcn-ui@latest init command.

[unxok]

If anyone else is having issues with this and none of the above worked, I found it's because I had a tailwind.config.js file and shadcn created a tailwind.config.ts file and only the .js file was being read. The solution being to just delete the .js config file.

[brt-yilmaz]

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 .

[sangdth]

I can't believe the solution to fix this issue came exactly like @unxok comment! Thanks for saving my 8 hours of sleep! <3

[kmiterror]

I noticed that if you are using tailwind with custom prefix, then you also have to adjust those border-border, bg-background and text-foreground class names So if your tailwind.config.ts file looks like below

module.exports = {
  prefix: 'your-custom-prefix-',
}

then you also have to adjust those layer entries in your index.css like below

@layer base {
  * {
    @apply your-custom-prefix-border-border;
  }
  body {
    @apply your-custom-prefix-bg-background your-custom-prefix-text-foreground;
  }
}  

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.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
    const tailwindPrefix = 'your-custom-prefix-';
    return twMerge(clsx(...inputs).split(' ').map(c => {
        // Check if the class contains a pseudo-class prefix and insert the Tailwind prefix accordingly
        const parts = c.split(':');
        if (parts.length > 1) {
            return parts.map((part, index) => index === 1 ? `${tailwindPrefix}${part}` : part).join(':');
        }
        return `${tailwindPrefix}${c}`;
    }).join(' '));
}

[haikelareff]

I want to use CSS variable so whats the solution now?

[haikelareff]

@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

@timidri Have you followed step 3 and added these options to tailwind.config?

https://ui.shadcn.com/docs/installation#configure-tailwindconfigjs

where is the step 3 you mention??

[0xNegative]

@haikelareff Check the prefix within your Tailwind config. If you have a prefix set there, then you will need to make sure you also apply that prefix to the classes being used here.

For example, if your prefix is ui-:

@layer base {
  * {
    @apply ui-border-border;
  }
  body {
    @apply ui-bg-background ui-text-foreground;
  }
}

[ROHAN13498]

If anyone else is having issues with this and none of the above worked, I found it's because I had a tailwind.config.js file and shadcn created a tailwind.config.ts file and only the .js file was being read. The solution being to just delete the .js config file.

THIS WORKED THANKS!!!

[sharukhi]

If anyone else is having issues with this and none of the above worked, I found it's because I had a tailwind.config.js file and shadcn created a tailwind.config.ts file and only the .js file was being read. The solution being to just delete the .js config file.

This worked for me

[Linux-NDOB]

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: tailwind.config.js tailwind.config.mjs

And both with different content.

The only solution i got was:

To delete the tailwind.config.mjs

Replace the tailwind.config.js content from: .

content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ],

to:

content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"]

And:

change the module.exports to export default and the content section with the code below to your tailwind.config.mjs file:

as the guide says.

So i got something like this in my tailwind.config.js:

/** @type {import('tailwindcss').Config} */ export default { darkMode: ["class"], // content: [ // './pages/**/*.{ts,tsx}', // './components/**/*.{ts,tsx}', // './app/**/*.{ts,tsx}', // './src/**/*.{ts,tsx}', // ], content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], prefix: "".....

Finally rename the tailwind.config.js to tailwind.config.mjs. This is because in the components.json file asks for a .mjs filetype.

"config": "tailwind.config.mjs".

Maybe this is a dumb comment but i guess may be useful for any new web dev who's learning for first time.

[jahabeebs]

If you're using

Yeah, already did that. But it's throwing a error in the nextjs app. I'm using the t3 monorepo create-t3-turbo with a separated UI package containing the shadcn stuff

 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 fixed the "The border-border class does not exist" issue by running the shadcn-ui init script ( npx shadcn-ui@latest init), it prompted me to install the shadcn-ui package, it overwrote my globals.css file, and then the issue was resolved

[DhruvRathod1]

I have encountered the same issue.

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!

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[Bishal-Bhandari01]

Hello @all, Try this code in global css.

@layer components {
  .border-border {
    border: 2px solid #000,
  }
}

works from my end, i only defined the custom css to solve this error. I think there are also other ways to solve this but I use this solution.