Tailwind CSS Suddenly Not Working With AstroJS

A quick tip when you are working with AstroJS and Tailwind CSS and suddenly Tailwind CSS is not working or behaving as expected. For me it suddenly started to work with some properties but not with others.

e.g

<h2 class="text-xl mt-2">Awesome Heading</h2>

So from some strange reason it just stopped accepting the mt-2 or any of the margin properties. text-xl among others was working fine. And this was without any error in the console, no config changes or anything.

Solution

Just restart the server aka ctrl+c in terminal to stop it and then run the server again with

npm run dev

It should starting working. I am not sure why this happens but it does. So if you are facing this issue just restart the server and it will work again, at least it did for me.

Happy Coding!

Back To All Blogs