Add tailwindcss

[silverwind]

This will get tailwindcss working on a basic level. It provides only the utility classes, e.g. no tailwind base which we don't need because we have our own CSS reset. Without the base, we also do not have their CSS variables so a small amount of features do not work and I removed the generated classes for them.

Note for future developers: This currently uses a tw- prefix, so we use it like tw-p-3.

Currently added CSS, all false-positives

.\!visible{

    visibility: visible !important
}

.visible{

    visibility: visible
}

.invisible{

    visibility: hidden
}

.collapse{

    visibility: collapse
}

.static{

    position: static
}

.\!fixed{

    position: fixed !important
}

.absolute{

    position: absolute
}

.relative{

    position: relative
}

.sticky{

    position: sticky
}

.left-10{

    left: 2.5rem
}

.isolate{

    isolation: isolate
}

.float-right{

    float: right
}

.float-left{

    float: left
}

.mr-2{

    margin-right: 0.5rem
}

.mr-3{

    margin-right: 0.75rem
}

.\!block{

    display: block !important
}

.block{

    display: block
}

.inline-block{

    display: inline-block
}

.inline{

    display: inline
}

.flex{

    display: flex
}

.inline-flex{

    display: inline-flex
}

.\!table{

    display: table !important
}

.inline-table{

    display: inline-table
}

.table-caption{

    display: table-caption
}

.table-cell{

    display: table-cell
}

.table-column{

    display: table-column
}

.table-column-group{

    display: table-column-group
}

.table-footer-group{

    display: table-footer-group
}

.table-header-group{

    display: table-header-group
}

.table-row-group{

    display: table-row-group
}

.table-row{

    display: table-row
}

.flow-root{

    display: flow-root
}

.inline-grid{

    display: inline-grid
}

.contents{

    display: contents
}

.list-item{

    display: list-item
}

.\!hidden{

    display: none !important
}

.hidden{

    display: none
}

.flex-shrink{

    flex-shrink: 1
}

.shrink{

    flex-shrink: 1
}

.flex-grow{

    flex-grow: 1
}

.grow{

    flex-grow: 1
}

.border-collapse{

    border-collapse: collapse
}

.select-all{

    user-select: all
}

.resize{

    resize: both
}

.flex-wrap{

    flex-wrap: wrap
}

.overflow-visible{

    overflow: visible
}

.rounded{

    border-radius: 0.25rem
}

.border{

    border-width: 1px
}

.text-justify{

    text-align: justify
}

.uppercase{

    text-transform: uppercase
}

.lowercase{

    text-transform: lowercase
}

.capitalize{

    text-transform: capitalize
}

.italic{

    font-style: italic
}

.text-red{

    color: var(--color-red)
}

.text-shadow{

    color: var(--color-shadow)
}

.underline{

    text-decoration-line: underline
}

.overline{

    text-decoration-line: overline
}

.line-through{

    text-decoration-line: line-through
}

.outline{

    outline-style: solid
}

.ease-in{

    transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}

.ease-in-out{

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.ease-out{

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

[wxiaoguang]

• I am not sure whether it is the right time to introduce tailwind
• But I am sure it should have proper prefixes if it would be introduced. Without prefix, some old PRs already caused many hidden regressions. For example:
  • Replace fomantic divider module with our own #25539
  • Replace fomantic popup module with tippy.js #20428
  • and more, IIRC there is also some "hidden" class related PR, that's why all these helper classes have proper prefix now
  • Update: Fix notification and stopwatch empty states #22845 , the "hidden" regression
  • And more details about why it must have prefix: [Proposal] Refactor frontend hide/hidden mechanism #22847

[yardenshoham]

I thought we had gt- classes instead of tailwind

[silverwind]

I don't want to introduce it with a prefix, it would just far too cumbersome to use. There are provenly no issues as seen in its CSS output into index.css and we can always extend its blocklist.

Migration and removal of gt- classes can happen anytime after this, I prefer separate PRs for those.

[wxiaoguang]

Considering there were already a lot of bugs caused by CSS class name conflicting, I believe using proper prefix for a new framework is a must.

This is a strong requirement from my side. Unless someone could prove that there won't be any conflict and the newly introduced names could be easily searched & replaced & maintained.

[silverwind]

Check the Currently added CSS in OP which at least proves no conflicts with first party HTML. I grepped all of them. The only case where conflicts could arise is with third-party HTML.

In fact, setting the gt- prefix now would introduce potential problems with the margin/padding classes because p-3 is 1rem in our CSS and 0.75rem in tailwind, those need to be migrated later.

[silverwind]

We can arrange the CSS so that any conflicting classes can be overridden easily in our helpers.css. Tailwind currently does not generate hidden likely because it can't find it anywhere in templates or js.

[wxiaoguang]

We can arrange the CSS so that any conflicting classes can be overridden easily in our helpers.css. Tailwind currently does not generate hidden likely because it can't find it anywhere in templates or js.

Keeping adding names into "blacklist" is also problematic. When Gitea says that "it supports tailwind", then I try to use some "blacklisted" CSS names, then nothing happens or strange thing happens: it is not friendly to developers, just wastes time again.

Adding a proper prefix like tw- resolves every problem.

[silverwind]

Adding a proper prefix like tw- resolves every problem.

Yes, but it offloads the problem to each developer having to type more. Well I guess at least we are already used to that with the gt- prefix.

[silverwind]

Here's your damn prefix. I strongly dislike it as I'm sure it would have worked without but if you prefer to place extra burden on the developers, so be it.

We should aim to remove both the tw- and gt- prefixes eventually and aim to only use tailwind.

[wxiaoguang]

but if you prefer to place extra burden on the developers, so be it.

I wouldn't call it a burden. At least, it's better than undetectable regressions and strange quirks (lacking some CSS classes).

We should aim to remove both the tw- and gt- prefixes eventually and aim to only use tailwind.

I could agree, I can see that gt- could be replaced by tw- soon, but I think Fomantic UI's CSS is still a blocker for this object.

dismiss review

[techknowlogick]

Yeah, a quick +1 of what @denyskon said. Use the prefix now, and then remove it later once fomantic has been refactored out.

And a general 🎉 for this PR, tyvm for your work on this.

[wxiaoguang]

Tested with various tmpl syntax, for most cases it works well.