-2

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.

Improve this question
4
  • Not sure what the problem could be but you should follow the guide in the Tailwindcss docs on setting it up with vite: tailwindcss.com/docs/guides/vite. I just set it up without hassle following the docs. Commented Aug 21, 2024 at 11:49
  • 3
    This question is similar to: unknown at rule @tailwind css(unknownAtRules) tailwind error. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. Commented Aug 21, 2024 at 12:36
  • The answer to this question, if you use VsCode, is here: stackoverflow.com/a/76777398/20929778 Commented Oct 12, 2024 at 10:29
  • This question is similar to: How to add a @tailwind CSS rule to CSS checker. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. Commented Jul 8 at 16:01

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

index.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Replace the index.css file configuration using the above given configuration.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.