Fluttify TailwindCSS, get rid of CSS confusions

[samuelstroschein]

I recently programmed an app with Flutter. During the process, I thought I enjoy programming the UI in HTML + TailwindCSS more than programming the UI with Flutter. However, yesterday I had to code a very small website for which I used HTML + TailwindCSS again. The development experience in Flutter is better for a very simple reason, it's more declarative than TailwindCSS because it does not have these weird CSS quirks which Tailwind kind of inherited such as "align-content, align-items, align-self, justify-content". These names make no sense (especially to beginners. Heck, I have to Google every time how Centering something works!). In the following, I will give one example of how designing UI's in Flutter works compared to TailwindCSS and an idea of how "Fluttified TailwindCSS" could look like.

A column with centered children on the y-axis

Flutter

Expanded is just like 'h-full'.

   Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CHILDREN
        ],
      ),
    );

The line to notice here is 'mainAxisAlignment: center'. The mainAxis of a column is the y-axis. If one wants to align the children on the x-axis (which is the mainAxis of a row), that's the solution:

mainAxisAlignment: MainAxisAlignment.center
crossAxisAlignment: CrossAxisAlignment.center

TailwindCSS

This is a code snippet I came up with yesterday after 15 minutes of trial and error. I am sure there are better ways, but I couldn't figure out a better way. I don't even know what the flex-wrap does but without it the children would not be centered.

<div class="h-full flex flex-wrap content-center">
  <div class="flex flex-col">
      CHILDREN
  </div>
</div>

Fluttified

<div class="h-full column main-center">
    CHILDREN
</div>

I want a column where the children are aligned on the main-axis (maybe even easier: x-center and y-center).

There could be more examples but the general idea is just to get rid of confusing CSS names and move to something logical as in the example above replacing "flex flex-center etc." with "column" "row" "x-center" "x-space-between" etc.

What do you think?