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

How to configure Tailwind CSS with Vite in a React project? – Reactjs

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.

Tags:

2

Answers


  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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search