Your web browser is out of date. Update your browser for more security, speed and the best experience on this site.

Update your browser
• By Jake Dohm

Using Tailwind’s Space and Divide Utilities

Today we are going to take a quick peek at the new Space and Divide Utilities that were added to Tailwind in version 1.3.

Final code

<div class="
  flex md:flex-row justify-center
  md:space-x-4 md:space-y-0
  flex-col space-y-4
">
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
</div>

<div class="my-8"></div>

<div class="
  flex md:flex-row mx-auto w-3/5 justify-between
  md:divide-x-2 md:divide-y-0
  flex-col divide-y
">
  <div class="flex-grow text-center uppercase font-bold">Never</div>
  <div class="flex-grow text-center uppercase font-bold">Gonna</div>
  <div class="flex-grow text-center uppercase font-bold">Give</div>
  <div class="flex-grow text-center uppercase font-bold">You</div>
  <div class="flex-grow text-center uppercase font-bold">Up</div>
</div>
View all articles