Question 288243 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can you please tell me why I am getting ths error custom class tailwindcss error

This is my vite-react project where I am using tailwindcss and I am getting this error saying

Browser result

Inside Vscode

I have already installed tailwind css and bg-dark-1 is a custom class and is already inside @layer directive but not sure why I am getting error.

If I remove
body { @apply bg-dark-1 text-white min-h-screen font-inter; }
the project is working fine.

Can you tell me how to fix the issue?

Tags:

2

Answers


  1. 0

    @apply is a Tailwind directive and classes you use within it must be recognized by TW. The error is complaining about font-inter; TW doesn’t know what it is. You should include this in an @layer directive.

    Alternatively, if you’re using Sass, you could take font-inter out of @apply and instead use @extend .yourclass to append the class, or if not this, then simply apply the class directly to the element.

    Login or Signup to reply.
  2. 0

    apply it as you would in a css file

    @tailwind base;
@tailwind components;
@tailwind utilities;

body { @apply bg-dark-1 text-white min-h-screen font-inter; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search