Tailwind css classes dont work properly

[Fluffy2908]

Hello

I would like to ask you guys if someone has had similar issues with tailwind css. I'm running V4 and noticed that sometimes some classes are being loaded and some not. I typed my code in the play tailwind site to check if it is responding the way it should but when i type the same code in my project half of those things dont apply. I will add pcitures of my code and how it looks like on play tailwind and how it looks on live server. I had the same issue on another project where the pictures werent the size that i stated in the classes. Thx for the help guys.

[wongjn]

What is the desired behavior? Which classes are not working for you? Could you provide a git repo that reproduces the unexpected behavior please?

[Fluffy2908]

The grid layout should look like the picture from play tailwind but instead i get this layout from liveserver

[wongjn]

Try using the same HTML from the play in your code.

[Fluffy2908]

I did. I'm thinking that maybe my tailwind somehow isnt registering all css styling. Because i also sometime have problem with the color like bg-gray-300 or text-red-700.

[wongjn]

You may not have updated the repo - I don't see the matching HTML in the index.html file. Neither do I see bg-gray-300 or text-red-700.

[Fluffy2908]

those are just examples that i came off when i was styling the website. The problem here is that lg:text-8xl isnt applied font-extrabold im not so sure maybe misspeled, And the whole layout isnt like it shown in playtailwind.

[Fluffy2908]

I copied my html into play tailwind and the code is working. That must mean something is wrong from my side. What could effect the tailwind config or lack of it ?.

[Fluffy2908]

i updated my style.css with added @theme options forn text, color, font, radius etc. And the result is still the same.

[wongjn]

Consider checking you've recompiled the CSS after editing files, or have the tailwind process running with --watch to automatically rerun compilations on file changes.

[Fluffy2908]

That was the problem. I didnt have the script for watch or build. Thank you for your help :)

[Fluffy2908]

Okay i just solved the problem. I had to make a script:

"scripts": {
"start": "react-scripts start",
"build-css": "tailwindcss -i style.css -o output.css",
"watch-css": "tailwindcss -i style.css -o output.css --watch",
"dev": "concurrently \"npm run watch-css\" \"npm start\""

and put it into the package.json. Then i typed into the terminal npm run build-css and after that npm run watch-css. Now all the styling is showing and aplying. Sorry to bother you guys but i hope this will be a solution for someone with similar problems.