Working with tailwindcss has been great and one of my first quick tips around it is the use of spacing. When we are creating components a lot of the time we equally divide the individual parts inside by the same margin.

With tailwind it's easy to repeatedly add that margin as we write.

<div>
  <div className="mt-4">1</div>
  <div className="mt-4">2</div>
  <div className="mt-4">3</div>
</div>

But we can avoid this repetition by using spacing

<div class="space-y-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Now all the children will be equally spaced vertically.

You can also space the children horizontally using

<div class="space-x-{amount}">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Nice!