Use tailwind instead of gt-[wh]- helper classes

[lunny]

Follow #29357

• Replace gt-w-* -> tw-w-* and remove gt-w-*
• Replace gt-h-* -> tw-h-* and remove gt-h-*

[silverwind]

Remove gt-w-full from helpers.css if there are no more occurences. We can do more such migrations in one PR, does not have to be 1 property per PR.

[delvh]

I agree with removing the helper class, but I disagree with more than one property per PR.
From my previous experience, the smaller and easier a PR can be reviewed, the faster it will be merged, as we've seen with the jQuery removal.

[silverwind]

I agree with removing the helper class, but I disagree with more than one property per PR. From my previous experience, the smaller and easier a PR can be reviewed, the faster it will be merged, as we've seen with the jQuery removal.

Fine with me in any case.

[wxiaoguang]

I agree with removing the helper class, but I disagree with more than one property per PR.

Similar classes could be done in the same PR. eg: gt-w-* / gt-h-* to tw-w-* / tw-h-*

[wxiaoguang]

One more question, do the tw- classes have "!important"? Otherwise it can't replace gt- directly.

[lunny]

I agree with removing the helper class, but I disagree with more than one property per PR. From my previous experience, the smaller and easier a PR can be reviewed, the faster it will be merged, as we've seen with the jQuery removal.

I did some of them because the previous changes are too small. I think it's still small enough to be reviewed.

[wxiaoguang]

#29423 (comment)

Without !important, tw-* might not work in some cases.

[lunny]

One more question, do the tw- classes have "!important"? Otherwise it can't replace gt- directly.

I don't think these tw- classes have "!important", but at my previous checks, they works well.

[delvh]

https://tailwindcss.com/docs/configuration#important

[silverwind]

No, tailwind classes like tw-w-full have no !important. I think it can be achieved per-class via ! prefix, e.g. !tw-w-full. Would not recommend setting this important config option, but instead do it case-per-case.

[delvh]

The config option is intended exactly for our usecase:
Introducing tailwind to an existing system.

[silverwind]

So yes, this ! prefix would be a topic to look out for for the migration. We could go the lazy route and migrate the gt- prefixes to !tw- or we check case-by-case basis whether important was necessary.

[silverwind]

The config option is intended exactly for our usecase: Introducing tailwind to an existing system.

Yes, it's equivalent to adding the ! on all classes, but the class prefix gives the option to later remove it on a per-case basis.

Long-term I think removing unnecessary !important would be better, so I would recommend we migrate gt- to !tw- now, ideally dropping all ! that are not needed, but I see that as optional during migration.

[wxiaoguang]

Then it needs to test every change carefully. To see whether it needs !important.

Otherwise, gt- can't be replaced by tw- directly, because some !important is used to "fine tune" the existing styles.

So what do you think about these possible approaches?

1. 👍 Test every change when replacing gt- to tw-, only use ! when necessary
   • There are a lot, for example, gt-df / gt-p-* / gt-m-* is everywhere, including some pages which are not easily seen.
2. 🚀 Replace all gt- to !tw-
3. 🎉 Add !important to all tw-

[silverwind]

👍 and 🚀 are both acceptable for me. 🎉 would be too limiting long-term.

Assuming @lunny has tested the cases here, this PR would be an example of an ideal 👍 where all !important are removed.

[wxiaoguang]

Sorry but it is not really fully tested. At least, I can see:

class="page-content ui container center tw-w-screen 

.page-content .ui.ui.ui.container:not(.fluid) {
  width: 1280px;
  max-width: calc(100% - 64px);
  margin-left: auto;
  margin-right: auto;
}

[wxiaoguang]

Assuming @lunny has tested the cases here, this PR would be an example of an ideal 👍 where all !important are removed.

If we would like to avoid regression, then we can't assume anything.

If we would like to tolerate some regressions, then maybe the rule could be relaxed.

[silverwind]

If we would like to avoid regression, then we can't assume anything.

Yes, that' why I redacted my review actually 😆.

[silverwind]

I wonder thought: Is there ever any case where !important actually matters for tailwind styles? I can't think of any case where tailwind CSS should not override non-tailwind CSS because in such a scenario, one would instead remove the tailwind class.

I'm starting leaning towards option 3 actually, the only downside is that the CSS would end up a few bytes bigger because of all these !important strings, but it will compress well.

[wxiaoguang]

I'm starting leaning towards option 3 actually, the only downside is that the CSS would end up a few bytes bigger because of all these !important strings, but it will compress well.

That's also my first preference. But I guess few people would agree with it if I said so 😁 so I spent some more time on "finding bugs".

[silverwind]

I think the only case where !important would actually matter is if a tailwind class maps to multiple CSS properties and you want one of them !important and the other not.

But I think such cases are rare enough that one can always write custom CSS and I think we likely won't even encounter them because as far as I understand, 99% of tailwind classes map to exactly 1 CSS property. Any classes that map to more than 1 property are breaking the concept of "atomic CSS" and should be avoided anways.

[delvh]

LGTM apart from the pending rewrite to the chosen important mechanism

[silverwind]

I strongly believe 🎉 is the way to go now. Developers should not have to worry about CSS precedence when using a atomic CSS framework like tailwind.

[zokkis]

The title should be "Use tw-w-* instead of gt-w-" or something like "Use tailwind for width instead of gt-w-"

[silverwind]

I strongly believe 🎉 is the way to go now. Developers should not have to worry about CSS precedence when using a atomic CSS framework like tailwind.

#29437 for this.

[wxiaoguang]

After #29437 , I think it is safe to use tw- to replace gt- directly now.