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

Reactjs – TailwindCSS configuration in Vite React shows error in index.css file

I was starting my Vite React project. And as the next step I configured TailwindCSS as per Vite React documentation. Then I got this error message which targets the index.css file. The file only contained Tailwind CSS imports. How to solve this issue?

/* index.css */

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

Error messages:

  1. Unknown at rule @tailwind
  2. Unknown at rule @tailwind
  3. Unknown at rule @tailwind

I tried searching in the internet & connected some of my colleages. And they suggested me to retry the installation configuration or to ignore the error.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    index.css

    @import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

***Replace the index.css file configuration*** using the above given configuration.This will solve the problem.

  2. 0

    When I install Tailwind CSS with Vite, I add the @tailwind directives for each of Tailwind’s layers in my ./src/index.css file. Like this,

    @tailwind base;

@tailwind components;

@tailwind utilities;

    but i was getting the error messages

    Unknown at rule @tailwind 

Unknown at rule @tailwind

Unknown at rule @tailwind

    So, I change the file configuration of the index.css using this

    @import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

    And the problem/error get solved, the vite project is running without any issues.

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

Back To Top
Search