TailwindCSS, Give Me Some Space

Recently, I started using the space utility classes in Tailwind, which gives you the ability to create equal space between elements.

When I first started using Tailwind, I found myself reaching for mx-5, my-3, ml-2, and all the other awesome margin utility classes. There was nothing wrong with this; however, there’s a better way to space elements in Tailwind's newer versions.

In this tutorial, I'll show you why you may want to use them and how easy they are to implement.

Margin vs. Space

What's the difference between the margin and space utility classes? Well, there is no difference under the hood. TailwindCSS uses margin to calculate the spacing between the elements, and in return, it makes your markup and code a lot cleaner.

Here's an example of separating a few blocks using the margin utility classes:

<div class="flex p-10">
    <div class="w-10 h-10 bg-black ml-3"></div>
    <div class="w-10 h-10 bg-black ml-3"></div>
    <div class="w-10 h-10 bg-black ml-3"></div>
    <div class="w-10 h-10 bg-black ml-3"></div>
</div>

Now here is the same design using the space classes:

<div class="flex p-10 space-x-3">
    <div class="w-10 h-10 bg-black"></div>
    <div class="w-10 h-10 bg-black"></div>
    <div class="w-10 h-10 bg-black"></div>
    <div class="w-10 h-10 bg-black"></div>
</div>

As you can see, they look identical because they are doing the same thing; however, the spacing just looks cleaner and makes it easier to modify.

Here's a quick example of how using the space classes can make your code easier to modify:

Say, for instance, that you want to change the space between elements from 3 units of measure to 5. Using margins, you would have to modify each element by changing ml-3 to ml-5. Instead, using spaces, you could simply change space-x-3 to space-x-5 in one place, and it would change the space for each of the child elements.

First And Last Elements

Another great reason to use the space classes over margin is that you don’t have to worry about the extra margin that occurs when looping over a set of elements.

Here's a quick example of looping through a set of images and adding margin-left to each image:

<div class="flex p-10">
    @foreach($images as $image)
        <img class="h-32 w-32 object-cover ml-5" src="{{ $image }}">
    @endforeach
</div>

as you'll notice in this example, we would end up with an extra margin-left with our first image. Of course, we could detect the first occurrence and omit the ml-5; or, instead, we can utilize the space utilities to solve this problem:

<div class="flex p-10 space-x-5">
    @foreach($images as $image)
        <img class="h-32 w-32 object-cover" src="{{ $image }}">
    @endforeach
</div>

We will have equal spacing between our elements, and we won't have to worry about trailing margins on the left or right. 🙌

Responsive Spacing

Using the space utility classes, we can also change space between elements based on the client width. This means you can easily change the spacing if visitors view the site from their desktop or mobile device.

Take a look at the following example (from the Tailwind docs):

<div class="flex space-x-2 md:space-x-8">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

When viewing from a Desktop (medium or larger) screen size, each element will have 8 units of measure; otherwise, it will have 2 units of measure spacing in-between.

I don't know what else to call this, except "Responsive Awesomeness!"

Reverse Order Spacing

When working with flex containers you may reverse the order of elements from time to time. When you add a margin between elements and then switch the order, it can cause some weird spacing anomalies. Luckily there is a utility class for this as well. Take a look at the following example:

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Now, when the elements are reversed, the spacing between elements will distribute correctly. 👌

Extending Space

You may also wish to extend the spacing measurements, which you can easily do inside your tailwind.config.js

// tailwind.config.js
module.exports = {
    theme: {
        spacing: {
            sm: '8px',
            md: '16px',
            lg: '24px',
            xl: '48px',
        }
    }
}

This will apply additional units of measurement for spacing, padding, margin, width, and height.

Alternatively, if you wish to only apply additional units to the space utility classes, you can do so by extending the theme.spacing of your tailwind.config.js like so:

// tailwind.config.js
module.exports = {
    theme: {
        space: {
            sm: '8px',
            md: '16px',
            lg: '24px',
            xl: '48px',
        }
    }
}

More About Spacing

Be sure to check out the Official Tailwind Documentation on Spacing to learn more.

Additionally, feel free to play around with spacing and get a feel for it. You can do this by visiting the Official Tailwindcss Playground.

As always... Happy Coding and have some fun using these awesome spacing utility classes. ✌️