Skip to content

Upgrade frontend to Tailwind CSS v4#37260

Draft
bircni wants to merge 5 commits intogo-gitea:mainfrom
bircni:feat/migrate-tailwind4
Draft

Upgrade frontend to Tailwind CSS v4#37260
bircni wants to merge 5 commits intogo-gitea:mainfrom
bircni:feat/migrate-tailwind4

Conversation

@bircni
Copy link
Copy Markdown
Member

@bircni bircni commented Apr 17, 2026

This upgrades the frontend from Tailwind CSS v3 to v4 and removes the tw- utility prefix.

  • The Tailwind build now uses the v4 Vite plugin.
  • I also replaced the old tw-hidden behavior with a dedicated gt-hidden class so hidden-state handling keeps working in places where Fomantic or other display utilities would conflict.

I also tested it locally and it looked good

Created with help of Codex

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 17, 2026
@github-actions github-actions bot added modifies/go Pull requests that update Go code modifies/templates This PR modifies the template files modifies/dependencies modifies/frontend labels Apr 17, 2026
@silverwind
Copy link
Copy Markdown
Member

silverwind commented Apr 17, 2026

Keep note of #37049, but that one looks stalled so probably ok to go ahead here. This change needs intricate validation, I hope your AI is up to that task.

@wxiaoguang
Copy link
Copy Markdown
Contributor

wxiaoguang commented Apr 17, 2026 •
edited
Loading

removes the tw- utility prefix.

No, it won't look good.

@silverwind
Copy link
Copy Markdown
Member

silverwind commented Apr 17, 2026

tw-hidden

Why not keep the class as tw:hidden? The name is kind of ingrained for me 😆.

@silverwind
Copy link
Copy Markdown
Member

silverwind commented Apr 17, 2026 •
edited
Loading

tw prefix can only be removed if all collisions with fomantic classes like grid are fixed (e.g. rename fomantic classes to like fm-grid to not conflict with tailwind or replace them), see #37049 (comment).

@silverwind
Copy link
Copy Markdown
Member

silverwind commented Apr 17, 2026 •
edited
Loading

Feasible steps for prefix-less would be:

  1. Do a pass looking for all class colissions with tailwind 4 in the current codebase that don't have a tw- prefix, stuff like grid.
  2. Rename all matched classes to like fm-* if they come from fomantic or other suitable names if they are not from fomantic.
  3. Upgrade tailwind to v4 and migrate all tw- to prefixless.

I still would like to have prefix-less tailwind, so I welcome the change, but it needs to be done properly.

bircni added a commit to bircni/gitea that referenced this pull request Apr 17, 2026
@bircni @codex
Revert "Upgrade frontend to Tailwind CSS v4"
98c230b 
Tailwind CSS v4 only supports prefix syntax as variants like tw:flex, which is incompatible with Gitea's current tw- utility classes. The review discussion on go-gitea#37049 and go-gitea#37260 also made it clear that prefix removal is not acceptable until class collisions with Fomantic are resolved first.

Co-Authored-By: Codex (GPT-5) <codex@openai.com>
bircni and others added 3 commits April 17, 2026 23:13
@bircni @codex
Rename colliding Fomantic classes
35c4456 
Rename bare Fomantic-style class families to fm-* so they no longer collide with prefixless Tailwind utilities. This adds a collision audit command and updates the Fomantic bridge/runtime classes accordingly.

Co-Authored-By: Codex (GPT-5) <codex@openai.com>
@bircni @codex
Upgrade frontend to Tailwind CSS v4
e8f25e8 
Migrate Tailwind to the v4 Vite integration, switch the CSS entrypoint to the v4 import style, and remove the old utility prefix after the collision cleanup. This also keeps hidden-state behavior compatible with Fomantic by using gt-hidden and fm-hidden where needed.

Co-Authored-By: Codex (GPT-5) <codex@openai.com>
@bircni
remove migration scripts
b241074
@bircni bircni force-pushed the feat/migrate-tailwind4 branch from 98c230b to b241074 Compare April 17, 2026 21:20
@bircni
Copy link
Copy Markdown
Member Author

bircni commented Apr 17, 2026

Feasible steps for prefix-less would be:

  1. Do a pass looking for all class colissions with tailwind 4 in the current codebase that don't have a tw- prefix, stuff like grid.
  2. Rename all matched classes to like fm-* if they come from fomantic or other suitable names if they are not from fomantic.
  3. Upgrade tailwind to v4 and migrate all tw- to prefixless.

I still would like to have prefix-less tailwind, so I welcome the change, but it needs to be done properly.

thats a good plan - I tried to follow it

@bircni
Copy link
Copy Markdown
Member Author

bircni commented Apr 17, 2026

still reviewing on myself but looks kinda good

@silverwind
Copy link
Copy Markdown
Member

silverwind commented Apr 17, 2026 •
edited
Loading

For step 1, clone tailwindcss main branch and make it look for all class patterns in that repo that it can create using our config, then let it search with those patterns in the codebase to identify the collissions.

@bircni @codex
Keep the tw prefix for Tailwind CSS v4
3ee60b1 
Co-Authored-By: Codex (GPT-5) <codex@openai.com>
@bircni
Copy link
Copy Markdown
Member Author

bircni commented Apr 17, 2026 •
edited
Loading

@silverwind flaky db test or flaky ldap?

https://github.com/go-gitea/gitea/actions/runs/24587209537/job/71899729295?pr=37260

@silverwind
Copy link
Copy Markdown
Member

silverwind commented Apr 17, 2026

Yes, probably a flake, open an issue for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. modifies/dependencies modifies/frontend modifies/go Pull requests that update Go code modifies/templates This PR modifies the template files

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@bircni @silverwind @wxiaoguang @GiteaBot