Adds an additional flex justify class 'space-evenly'

[TuzBot]

In addition to the current Flex justify classes found in the docs, there is also another justify class which could be useful to have as a standalone.

[adamwathan]

Hey @TuzBot thanks for the PR!

The only issue with space-evenly for me is that it is not supported at all in Edge or IE. This is true for a bunch of other flex-related values that we excluded for the same reason, like justify-content: baseline and justify-content: stretch.

I'm not entirely opposed to including utilities that don't have support in all modern browsers, but part of me feels it's a bit of a waste since I doubt there's many people out there working on projects where they don't have to support at least Edge.

I also feel like if we are going to include one flex value that's not supported in Edge that we should include all of them, which would make this a lot easier to say no to.

Do you think there's enough contexts where people can safely use this utility to justify including it by default?

[reinink]

Hmm, tricky. I think our current approach makes a lot of sense. I see a ton of value in Tailwind only offering utilities that are practical to use given today's browser support. This is the exact same reason we're not including grid classes in the core right now. I could see things like grid being added as optional extensions (which is actually the plan), but not included in core until they have a sufficient amount of browser support.

One thing you can obviously do is create your own utilities if you want to use these. Check out this doc page for more info: https://tailwindcss.com/docs/adding-new-utilities

[TuzBot]

Hey @adamwathan

Yea, I get the issue and the real pain to support IE (of some version).

I doubt there's many people out there working on projects where they don't have to support at least Edge.

Too true and with that being said, it makes the class .space-evenly redundant and pointless in this case.

I will close this PR 👍

[hacknug]

Why not make it like this:

.justify-evenly {
  justify-content: space-around;
  justify-content: space-evenly;
}

This way we could start using it in modern browsers and have a decent fallback in case its not supported. The only problem I see with this is that justify-content: space-around should be manually removed at some point in the future.

Devs could also provide a better fallback in case it was needed. For that they could use pseudo-elements like described here: https://stackoverflow.com/questions/47534216/how-to-make-css-justify-contentspace-evenly-fallback-to-space-between-on-safari

[adamwathan]

That's a neat idea but it sets a precedent of Tailwind trying to make up for browser inconsistencies in our utilities which we currently don't do at all, so I'm not totally comfortable making that leap any time soon. Of course it's super easy to add that utility yourself, which is what I'd recommend instead.