No Time Dad

A blog about web development written by a busy dad

Tailwind Flex Right

Tailwind flex right isn’t really a thing. It’s more of a concept that results from combining a few different css properties and applying them with tailwindcss. What tailwind flex right is trying to accomplish is pushing a given element in a flexbox container as far to the right as possible. Sounds easy enough.

Luckily, flexbox does make this easy for me. And there are a couple different ways to create my own tailwind flex right. The basic idea is that I’ll have a parent container that initializes a flexbox container via tailwind flex utility class, which is the same as css display flex written as display: flex;.

If I want all of the child items pushed to the right I can use tailwind’s justify-end utility class in the parent container. Tailwind justify-end is the same as css justify content end written as justify-content: flex-end;. The css justify-content property defines the alignment along the x-axis.

Item 1
Item 2
<div class="flex justify-end ...">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

But what if I wanted only Item 2 to be pushed to the right? Again, there are a couple options. I don’t think there is a right or wrong approach with either of them, it’s more a matter of personal preference.

Item 1
Item 2
<div class="flex justify-between ...">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

So, the first option is to just tailwind justify-between. This is equivalent in css to justify-content: space-between;. It’s imporant to note that this approach will only work if you have two child items in the flexbox container. Once I add three or more child elements the spacing changes to account for each item.

Item 1
Item 2
Item 3
<div class="flex justify-between ...">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

A third option for pushing an item to the right is to use auto margins. This requires that I add a class to the item next to the one I want pushed to the right, which usually isn’t too much of a problem. It’s really only a problem if I apply the auto margin to an element that is not the last sibling child element. Like Item 2 in the example above.

Item 1
Item 2
<div class="flex ...">
  <div class="mr-auto">Item 1</div>
  <div>Item 2</div>
</div>

Notice how Item 1 now has the tailwind utility class mr-auto added. This is equivalent to adding css margin-right: auto; to Item 1. This tells the browser to push the next item as far right as possible given the amount of space available. And similar to the justify-between example, mr-auto can be problematic if there is three or more items.

Item 1
Item 2
Item 3
<div class="flex ...">
  <div class="mr-auto">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

In this case, if I only wanted Item 3 to be pushed right I’d need to move the tailwind marging right auto utility class to Item 2’s div. I’d also need to change Item 2 to take all available space via tailwind flex 1 utility class flex-1.

Item 1
Item 2
Item 3
<div className="flex ...">
  <div>Item 1</div>
  <div class="flex-1">Item 2</div>
  <div class="ml-auto">Item 3</div>
</div>

Now I’ve effectively created my own version of tailwind flex right, even though it took a little more extra work. I’ve run into use cases for this approach more times than I can count. Flexbox makes it simple to implement, and it’s reliable. I don’t have to worry about calculating spacing or anything strange like that. It just works.