[vishnuharidas]

Why did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?

[freetonik]

There is probably some explanation, but in general, I find many CSS properties confusing and unintuitive: `color`, `text-align`, `position: absolute` vs `position: fixed` (absolute is still technically relative!), etc.

[cluckindan]

Everything is laid out on the page in a flow, according to DOM order. Think how a typewriter produces text on a page: top-down, left-to-right. This is the flow.

Absolute takes the element out of the flow while relative maintains it in the flow.

[sureIy]

What isn't clear (even to many experts) is that certain properties change the layout model entirely and that text has its own "pushing" box that contributes to sizing.

[cantSpellSober]

For discussion I'd argue

• this name works with Grid and Flexbox

• this convention matches justify-items and justify-self, which makes sense

to your point I still confuse it with align-content sometimes.

[rererereferred]

Similarly, I find confusing that the `grid-template` shorthand uses the y axis first: y1 / x1 / y2 / x2

It's also not zero based which I always forget.

[insin]

Either Google has shifted _so much_ focus to getting an LLM to tell you about very real Encanto 2 spoilers that its search capabilities have atrophied, or my surprise at there not already being a Tailwind plugin for this is justified:

    const plugin = require('tailwindcss/plugin')

    const aliasFlexboxAlignment = plugin(function({ addUtilities }) {
      addUtilities({
        '.cross-axis-baseline': { 'align-items': 'baseline' },
        '.cross-axis-center': { 'align-items': 'center' },
        '.cross-axis-end': { 'align-items': 'flex-end' },
        '.cross-axis-start': { 'align-items': 'flex-start' },
        '.cross-axis-stretch': { 'align-items': 'stretch' },
        '.main-axis-around': { 'justify-content': 'space-around' },
        '.main-axis-between': { 'justify-content': 'space-between' },
        '.main-axis-center': { 'justify-content': 'center' },
        '.main-axis-end': { 'justify-content': 'flex-end' },
        '.main-axis-evenly': { 'justify-content': 'space-evenly' },
        '.main-axis-normal': { 'justify-content': 'normal' },
        '.main-axis-start': { 'justify-content': 'flex-start' },
      })
    })

[cluckindan]

Tailwind sure is a blight upon frontend maintainability.

[9dev]

Is it, though? How much easier to refactor it in the future can it be, other than being able to search-replace Tailwind classes when the need arises to?

[tracker1]

... except for where you aren't wanting to replace.

[9dev]

Well, what is it then that is so complex about Tailwind? I’ve been hearing that for so long, but nobody was ever able to explain succinctly what Tailwind made so awfully complicated.

[gjsman-1000]

I strongly disagree; any large project using CSS tended to have arcane names for everything and turned into a Tailwind of its own, but worse.

I also like Tailwind because it’s so self-documenting. Even if Tailwind’s development were to stop, tomorrow, and all of the style sheets were lost globally, I would know what everything is meant to be.

[cluckindan]

There is no semantic connection between design and code.

[gjsman-1000]

I don’t even know what this means, but it sounds either stupid, or a theory that only works in a clean room laboratory.

[cluckindan]

Maybe you need to figure it out before jumping to conclusions like that.

I think it’s much easier to understand what

    <input class=”input input--email input--valid”>

is supposed to be compared to

    <input class=”bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal”>

[sod]

I didn't confuse it since I use the mnemonic "formatting text to “justify” is horizontal in my language".

Sure you can change that. But that covers the flex default behavior.

[vishnuharidas]

But when the `flex-direction` is `column`, `justify-content` becomes synonymous for "vertical alignment" - that's what creates the confusion here.

[rererereferred]

I guess it makesmsense if flex-direction vertical is like switching to a vertical language.