HOW TO SPACE ELEMENTS WITHOUT USING MARGIN WITH TAILWIND CSS

in these brief tutorial, I am going to quickly teach you on how you can space your elements without necessarily using margin.

Lets take a look at a quick example

<ul class="list-none space-x-4">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>

The space-x-4 class is a nice tailwind class which gives margin-left of 1rem to each of the child elements inside the ul.

Lets also see these other example

<div class="space-y-4">
<div>Home</div>
<div>About</div>
<div>Contact</div>
</div>

From the above example, you might have guessed that space-y-4 gives margin top of 1 rem to each child element of parent div element.

Alright guys. I hope you got something out of this. Let me know of any idea you want to learn in comments section and I will be happy to do it for you.