Add justify-normal and justify-stretch classes

[DavydeVries]

Discussed in #10558

^{Originally posted by DavydeVries February 12, 2023}
Hi,

Currently, I'm using for viewport sm the class sm:justify-center. But I like to make the element full width on viewport md. The default value of justify-content is normally justify-content: normal (maybe differs on other browsers?). But there is no way to "reset" back to normal value.

Do you have suggestions to solve my issue, or is this value missing from the core?

Example:
Element not full width: https://play.tailwindcss.com/pj23KKG5cV
What I like to achieve/Expected behaviour: https://play.tailwindcss.com/oQ38fSUAsn

Kind regards,
Davy

PS. I already tried to add normal to my config as an "extend" but didn't get it to work.

See #10559

[adamwathan]

Hey! The reason we didn't include this originally is because it's the same as justify-stretch, as per MDN docs here:

Any reason not to just use justify-stretch in your situation? To me it feels more expressive since getting things to expand to fill the space is your goal. We can definitely add this now that with v3+ it doesn't make the CSS any bigger by default, but still curious when it's useful to use this vs. explicitly using justify-stretch.

[DavydeVries]

I follow your lead on justify-stretch I did test this, and indeed that value also accomplish my goal. I did change my pull to that.

[reinink]

Just chatting with @adamwathan about this and I think the reason we didn't originally include stretch as an option was because the justify-* utilities were first added for flexbox, before grid even existed in Tailwind CSS, and stretch isn't supported by flexbox:

For what it's worth, you can also accomplish your design by adding the grid-cols-1 utility: https://play.tailwindcss.com/X2E5Zx6pFi

Either way, I think it makes sense to add now though for grid. I've also added justify-normal back to your PR for completeness.

Thanks for this! 💪