-1

I am working on a React project with Vite as the build tool. I want to use Tailwind CSS in my project, but I'm not sure how to configure it with Vite.

I have already installed Tailwind CSS globally using npm install -g tailwindcss. However, when I try to use it in my React components, I get an error saying that the sm: class does not exist.

I have tried to install Tailwind CSS locally using npm install tailwindcss, but I'm not sure how to configure it with Vite.

The specific error is this "The sm: class does not exist. If sm: is a custom class, make sure it is defined within a @layer directive." Can anyone guide me on how to configure Tailwind CSS with Vite in my React project? Thank you in advance!

I have tried to update the version of tailwind css in my project and I have remove and reinstall tailwind. I have added responsive variant to the tailwind.config.js file to see if "sm" class work but all in vein.

I want to use custom classes in your React app with Tailwind CSS and Vite, but you are encountering errors.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Owais Qasim
  • 1
  • 2

2 Answers2

1

you could try installing it as a developer dependency instead try this command

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

then follow this link to complete configuration

bug84151
  • 11
  • 1
0

Make sure that you've added the responsive variants to the variants option in your tailwind.config.js file:

module.exports = {
  variants: {
    extend: {
      display: ['responsive'], // Add this line
    },
  },
  // ...
}

Source: https://v2.tailwindcss.com/docs/configuring-variants

jlaceda
  • 866
  • 6
  • 11