[Proposal] Use tailwind style CSS class names for legacy helpers

[wxiaoguang]

Feature Description

Before, the helper classes are called df, ac, sb, which are very difficult to understand.

Now, Gitea has its own prefix gt-, so it's time to improve the legacy CSS class names. It would be very easy to do a search & replace since these names all have prefixes.

Reference: https://tailwind.build/classes

Example:

gt-db => gt-block
gt-df => gt-flex
gt-h-100 => gt-h-full
...

Screenshots

No response

[gempir]

Would you encourage the usage of tailwind generally? As opposed to styling via css, in vuejs?

[wxiaoguang]

I am not sure, maybe it's too early to introduce whole tailwind.

IMO, at the moment, these gt- helper classes seem enough, if there are something useful and general enough, they could be added one by one, instead of introducing the whole tailwind.

[wxiaoguang]

Maybe in the near future, the rule is as simple as:

• If there is a gt- helper class, then it can be used instead of other CSS styling.
• Otherwise, continue to use well-defined CSS styles.

So Gitea could only have some very widely used tailwind-style CSS helpers, avoid filling every class attribute with plenty of class names.

[gempir]

I find introducing parts of tailwind more confusing than just sticking to project owned helper classes.
Because then you have to be familiar with which parts of tailwind are introduced and new contributors just see "cool tailwind" but in reality it's just a fraction of tailwind.

Generally I would either say remove helper classes over time and only roll with css in vuejs OR just use tailwind everywhere.

[wxiaoguang]

I see your point. Actually, the tailwind-style already happened, there are already many. And I assume that maybe nobody has the confidence to introduce the whole tailwind at the moment, so maybe in the near future it's good to keep it as it was, only rename some legacy unclear helpers like db to gt-block.

gitea/web_src/less/helpers.less

Line 21 in c8c2a31

/* below class names match Tailwind CSS */

[wxiaoguang]

There are still many other problems in Gitea's frontend framework.

I don't see a progress for this proposal, so close it, until there is a clear picture.