DEV Community

RITWIKA PARUA
RITWIKA PARUA

Posted on

Problem faced when Tailwind CSS did not work on the screen.

#react #learning #devchallenge #portfolio

I faced a problem

Because Tailwind CSS did not work on screen. And I struggled for a few days. The peasants became low, and anger increased. I took help from Claude AI. I do not say that I am excellent at prompt writing. I just told it what the error was showing, the screenshot, and what I wrote in code.
Enter fullscreen mode Exit fullscreen mode 
I learned:-  1) Donot use @tailwind base;
@tailwind components;
@tailwind utilities; in css file because these are old version (tailwind V3) and now is V4 . Use only `@import tailwind` . 

The mistake :- I had not been idea , How to dowloaded post.css file, this is main conflict not to display on screen. I removed then all set.
Enter fullscreen mode Exit fullscreen mode 
But I noticed that claude said that you can use @import "tailwindcss";

`@layer base {
  body {
    @apply bg-gray-100 text-gray-900 font-sans m-0 p-0;
  }
}
Enter fullscreen mode Exit fullscreen mode


but in my css file doesnot work@layer base
Can you tell me how to fix it?
`
Comment on.....

Top comments (0)