[Feature suggestion] Flexbox gutters

[MatanYadaev]

I think it might be very handy to have a flexbox gutter utility class, the same as the grid has the gap utility class.

Currently, in order to implement gutters within a flexbox you should do .flex.-mt-4.-mx-2 > .pt-4.px-2 which is a nice implementation and works well, but it has 2 issues in my opinion:

1. Updating the gutter size requires multiple code changes in different lines - In order to update the size from 1rem to 2rem you need to update both the parent and the children. Not a nice experience. You might miss updating some children.
2. It's a logical and mental effort to implement flex with gutters - It might sound funny, but I use flexboxes a lot, and most of the time it comes with many configurations, horizontal aligns, vertical aligns, gutters, direction, etc... Removing the need to implement gutters any time you need a flexbox might improve DX. For gutters you need to remember that the parent uses negative margin, the children use positive padding, and the horizontal is half of the top.

It might be convenient if Tailwind.css will just have gutters-n class or gap-n as the grid has.

<div class="flex -mt-4 -mx-2">
  <div class="pt-4 px-2">
    Lorem
  </div>
</div>
<!-- Versus -->
<div class="flex gutters-4">
  <div>
    Lorem
  </div>
</div>

In my projects, I usually have a few variants of gutters, so I manually configuring some gutters-n utility classes and I find it very handy. I think it worth being in this framework.

Some of you also think it might be handy in Tailwind.css? Please share your opinions.

[jasonhulbert]

@MatanYadaev Do the space-x- and space-y- utilities not work for you purposes?

https://tailwindcss.com/docs/space

<div class="flex space-x-4">
  <div>Lorem</div>
  <div>Lorem</div>
</div>

[jasonhulbert]

Oh I see - you want padding gutters. Sorry!

[MatanYadaev]

@jasonhulbert I didn't notice this "Space Between" utility class, it seems good, but it actually can't help in cases you need both vertical and horizontal spacing (using flex-wrap).

[jasonhulbert]

@MatanYadaev Yes that's true - but you would face the same issue with your proposed gutters utility, right?

You could do something like this if you know how many items you expect to be in a "row".
The example demonstrates rows of 4 inside of a flex-wrap container.

.layout {
  @apply flex flex-wrap;
}

.layout > * {
  @apply w-1/4 px-4 py-2;
}

/* Remove left padding on the first and every 5th item */
/* In other words, the first item in every row of 4 */
.layout > *:nth-child(5n+1) {
 @apply pl-0;
}

/* Remove right padding on every 5th element */
/* In other words, the last item in each row of 4 */
.layout > *:nth-child(4n) {
  @apply pr-0;
}

An added benefit here is that you can easily modify these styles across breakpoints without having to redeclare a bunch of responsive classes in your markup.

Other than that, you could try creating some of your own utilities to help facilitate some of your project opinions.
https://tailwindcss.com/docs/adding-new-utilities

I'm not trying to detract from your feature request, just thought these things might be helpful.

[MatanYadaev]

@jasonhulbert Your code example seems too complex compare to my gutter suggestion (which I didn't invent, it's Bootstrap's classic gutter for years), and it actually does solve the multi-line issue, because the parent has negative top and horizontal margin.

Writing a plugin/local utilities is what I'm already doing, I just think it has enough value to be included in the Tailwind.css framework. @adamwathan WDYT?

BTW, about Bootstrap, as I can see now on Bootstrap 5 Alpha they do support g-n & g-x & g-y utility classes for gutters. It's actually pretty nice implementation. https://v5.getbootstrap.com/docs/5.0/layout/gutters/

[adamwathan]

Hey thanks for the suggestion! I'm not planning to add anything like this to the framework unfortunately because the implementation ends up being quite complex, and gap support is actually coming to flexbox with great support very soon (Chrome and Firefox already have it) so we will soon be able to just use the existing gap utilities in Tailwind for this sort of thing, with no weird negative margin hacks and stuff 👍 So my opinion is it's just to just create some custom classes or apply the workarounds manually until we can all switch to gap whenever Safari adds support!