Refactor text utility classes to Tailwind CSS by silverwind · Pull Request #36703 · go-gitea/gitea

silverwind · 2026-02-22T10:41:59Z

Replace Fomantic/custom CSS text utility classes with their Tailwind equivalents:

.text.<color> compound classes → tw-text-<color> classes
.text.small (font-size: 0.75em) → tw-text-xs (11px)
.text.truncate (overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block) → tw-inline-block tw-truncate

Remove the now-unused CSS rules from base.css and dashboard.css.

Replace all `.text.<color>` compound CSS class patterns with their Tailwind equivalents (`tw-text-<color>`), using behavior-preserving mappings for colors that don't directly match CSS variable names. Remove the now-unused `.text.<color>` CSS rules from base.css. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Rename getIssueColor to getIssueColorClass and HTMLTypeColorName to HTMLTypeColorClass since they now return Tailwind CSS class names instead of plain color names. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Refactors UI text utility styling away from Fomantic/custom .text.* classes to Tailwind-prefixed equivalents, and removes the legacy CSS rules backing the old utilities.

Changes:

Replaced .text.<color>, .text.small, and .text.truncate usages across TS/Vue and Go templates with tw-text-*, tw-text-xs, and tw-inline-block tw-truncate.
Updated icon/status color logic in JS/Go/templates to return/use Tailwind class strings.
Removed obsolete CSS rules from web_src/css/base.css and web_src/css/dashboard.css, and adjusted tests accordingly.

Reviewed changes

Copilot reviewed 89 out of 89 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
web_src/js/features/repo-issue-content.ts	Switches dropdown “delete” item styling to Tailwind text color class
web_src/js/features/issue.ts	Renames issue color helper to return Tailwind class strings
web_src/js/features/comp/TextExpander.ts	Updates issue suggestion icon classes to Tailwind
web_src/js/components/RepoRecentCommits.vue	Uses `tw-text-red` for error state text
web_src/js/components/RepoContributors.vue	Uses Tailwind text colors for error/additions/deletions
web_src/js/components/RepoCodeFrequency.vue	Uses `tw-text-red` for error state text
web_src/js/components/RepoBranchTagSelector.vue	Replaces `.text.small` with `tw-text-xs`
web_src/js/components/RepoActionView.vue	Replaces black/grey text utility classes with Tailwind equivalents
web_src/js/components/DiffFileTreeItem.vue	Maps diff status icon colors to Tailwind text classes
web_src/js/components/DiffCommitSelector.vue	Replaces `.text.light-2` with Tailwind `tw-text-text-light-2`
web_src/js/components/DashboardRepoList.vue	Updates commit-status color mapping to Tailwind classes and truncation utilities
web_src/js/components/ContextPopup.vue	Uses `getIssueColorClass` returning Tailwind class strings
web_src/js/components/ActionRunStatus.vue	Replaces Fomantic text color classes with Tailwind equivalents
web_src/css/dashboard.css	Removes legacy truncation width rule tied to `.text.truncate`
web_src/css/base.css	Removes legacy `.text.*` color/size rules and `.ui .text.truncate`
tests/integration/repo_commits_test.go	Updates expected commit status class strings to Tailwind
templates/user/settings/security/accountlinks.tmpl	Replaces `.text.primary` with `tw-text-primary`
templates/user/settings/repos.tmpl	Replaces gold/light-3 text utilities with Tailwind equivalents
templates/user/settings/profile.tmpl	Replaces red/blue text utilities with Tailwind equivalents
templates/user/settings/keys_ssh.tmpl	Replaces conditional green text utility with Tailwind
templates/user/settings/keys_principal.tmpl	Replaces conditional green text utility with Tailwind
templates/user/settings/keys_gpg.tmpl	Replaces conditional green text utility with Tailwind
templates/user/settings/applications.tmpl	Replaces conditional green text utility with Tailwind
templates/user/notification/notification_div.tmpl	Replaces grey/light-3/blue text utilities with Tailwind equivalents
templates/user/dashboard/milestones.tmpl	Uses Tailwind truncation + width utilities; replaces overdue red styling
templates/user/dashboard/feeds.tmpl	Replaces truncate and grey/black text utilities with Tailwind equivalents
templates/shared/user/profile_big_avatar.tmpl	Replaces grey/red/small text utilities with Tailwind equivalents
templates/shared/user/org_profile_avatar.tmpl	Replaces grey text with Tailwind equivalent
templates/shared/user/block_user_dialog.tmpl	Replaces red text utility with Tailwind equivalent
templates/shared/user/authorlink.tmpl	Replaces `.text.black` with `tw-text-text`
templates/shared/repo/list.tmpl	Replaces `.text.primary` with `tw-text-primary`
templates/shared/issuelist.tmpl	Replaces grey/overdue red text utilities with Tailwind equivalents
templates/shared/issueicon.tmpl	Replaces issue icon color classes with Tailwind equivalents
templates/repo/view_list.tmpl	Replaces primary/light-2 text utilities with Tailwind equivalents
templates/repo/view_file.tmpl	Replaces grey text utility with Tailwind equivalent
templates/repo/settings/webhook/history.tmpl	Replaces green/orange/red/grey text utilities with Tailwind equivalents
templates/repo/settings/webhook/base_list.tmpl	Replaces conditional status colors and destructive action color with Tailwind
templates/repo/settings/options.tmpl	Replaces red text utility with `tw-text-red`
templates/repo/settings/lfs_file_find.tmpl	Replaces grey text utility with Tailwind equivalent
templates/repo/settings/githooks.tmpl	Replaces conditional status colors with Tailwind equivalents
templates/repo/settings/deploy_keys.tmpl	Replaces conditional green text utility with Tailwind
templates/repo/settings/collaboration.tmpl	Replaces `.text.primary` with `tw-text-primary`
templates/repo/release/new.tmpl	Replaces grey text utility with Tailwind equivalent
templates/repo/release/list.tmpl	Replaces grey text utility with Tailwind equivalent
templates/repo/pulse.tmpl	Replaces purple/green/red text utilities with Tailwind equivalents
templates/repo/pulls/status.tmpl	Replaces light-2 and yellow status icon text utilities with Tailwind
templates/repo/migrate/migrating.tmpl	Replaces red text utility with Tailwind equivalent
templates/repo/issue/view_content/pull_merge_box.tmpl	Replaces complex `.text <color>` logic with Tailwind text class variants
templates/repo/issue/view_content/conversation.tmpl	Replaces grey/black text utilities with Tailwind equivalents
templates/repo/issue/view_content/comments_authorlink.tmpl	Replaces `.text.black` with `tw-text-text`
templates/repo/issue/view_content/comments.tmpl	Replaces `.text.black` with `tw-text-text` for original author blocks
templates/repo/issue/view_content/attachments.tmpl	Replaces grey text utility with Tailwind equivalent
templates/repo/issue/view_content.tmpl	Replaces black/grey text utilities with Tailwind equivalents
templates/repo/issue/sidebar/reviewer_list.tmpl	Switches reviewer icon class source to `.HTMLTypeColorClass`
templates/repo/issue/sidebar/issue_dependencies.tmpl	Replaces `.text.small` with `tw-text-xs`
templates/repo/issue/sidebar/due_date.tmpl	Replaces overdue red text utility with Tailwind equivalent
templates/repo/issue/milestones.tmpl	Replaces overdue red and destructive red text utilities with Tailwind
templates/repo/issue/milestone_issues.tmpl	Replaces overdue red text utility with Tailwind equivalent
templates/repo/issue/card.tmpl	Replaces grey-light and PR state colors with Tailwind equivalents
templates/repo/issue/branch_selector_field.tmpl	Replaces `.text.small` with `tw-text-xs`
templates/repo/diff/conversation.tmpl	Replaces “grey text” utility with Tailwind equivalent
templates/repo/diff/compare.tmpl	Replaces black text utility with Tailwind equivalent
templates/repo/diff/comments.tmpl	Replaces black/grey text utilities with Tailwind equivalents
templates/repo/commit_status.tmpl	Updates commit status icon classes to Tailwind equivalents
templates/repo/commit_page.tmpl	Replaces grey text utility with Tailwind equivalent
templates/repo/branch/list.tmpl	Replaces blue/red text utilities with Tailwind equivalents
templates/repo/actions/workflow_dispatch_inputs.tmpl	Replaces red icon class with Tailwind equivalent
templates/repo/actions/status.tmpl	Replaces status icon color logic with Tailwind equivalents
templates/repo/actions/runs_list.tmpl	Replaces red icon class with Tailwind equivalent
templates/repo/actions/list.tmpl	Replaces red icon class with Tailwind equivalent
templates/projects/list.tmpl	Replaces destructive red link styling with Tailwind equivalent
templates/package/shared/view.tmpl	Replaces `.text.small` with `tw-text-xs`
templates/package/content/maven.tmpl	Replaces `.text.small` with `tw-text-xs`
templates/org/team/teams.tmpl	Replaces black text utility with Tailwind equivalent
templates/org/team/sidebar.tmpl	Replaces grey italic text utility with Tailwind equivalent
templates/org/team/repositories.tmpl	Replaces primary/grey text utilities with Tailwind equivalents
templates/org/team/members.tmpl	Replaces grey italic text utility with Tailwind equivalent
templates/org/settings/options_dangerzone.tmpl	Replaces red text utility with Tailwind equivalent
templates/org/member/members.tmpl	Replaces green status indicator with Tailwind equivalent
templates/org/home.tmpl	Replaces grey text utilities with Tailwind equivalents
templates/org/header.tmpl	Replaces `.text.light` with Tailwind equivalent
templates/install.tmpl	Replaces conditional red summary styling with Tailwind equivalent
templates/devtest/flex-list.tmpl	Updates truncation and various text utilities to Tailwind equivalents
templates/admin/stacktrace-row.tmpl	Updates trash icon color class to Tailwind equivalent
templates/admin/repo/list.tmpl	Replaces gold/red text utilities with Tailwind equivalents
templates/admin/packages/list.tmpl	Replaces gold/red text utilities with Tailwind equivalents
templates/admin/org/list.tmpl	Replaces gold text utility with Tailwind equivalent
services/markup/renderhelper_issueicontitle_test.go	Updates expected rendered icon class string to Tailwind
models/issues/review.go	Renames review color helper to return Tailwind class strings

Comments suppressed due to low confidence (1)

web_src/css/dashboard.css:1

This change removes the previous width: 75% constraint that applied specifically to .dashboard.* .filter.menu .item .text.truncate. If the dashboard filter items still need that width to make truncation/layout behave correctly, add an equivalent Tailwind width utility (e.g. tw-w-3/4) on the corresponding truncated element in the dashboard filter markup.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

models/issues/review.go

wxiaoguang · 2026-02-22T13:34:18Z

Need to revert .text.truncate. I don't see why it can be right for all cases

silverwind · 2026-02-22T13:39:25Z

Need to revert .text.truncate. I don't see why it can be right for all cases

It's replaced with tw-inline-block tw-truncate and I tested a few cases and all look good. What are your exact concerns?

silverwind · 2026-02-22T13:41:33Z

As per https://v3.tailwindcss.com/docs/text-overflow, it's a exact replacement when combined with tw-inline-block, the only difference is the specificity (now 1-0-0 instead of 0-3-0).

wxiaoguang · 2026-02-22T13:44:29Z

we already have gt-ellipsis
other styles like .dashboard.issues .filter.menu .item .text.truncate
too many changes mixed together, hard to review

Unless you have tested all "truncate" related changed.

silverwind · 2026-02-22T13:45:45Z

Yes, I have manually tested all the truncate changes already. And yes I agree we should converge into 1 truncation class, but imho out of scope here.

* giteaofficial/main: (81 commits) Add keyboard shortcuts for repository file and code search (go-gitea#36416) Refactor text utility classes to Tailwind CSS (go-gitea#36703) Prevent redirect bypasses via backslash-encoded paths (go-gitea#36660) Fix force push time-line commit comments of pull request (go-gitea#36653) Fix get release draft permission check (go-gitea#36659) Move `X_FRAME_OPTIONS` setting from `cors` to `security` section (go-gitea#30256) Update JS and PY deps (go-gitea#36708) Move jobparser from act repository to Gitea (go-gitea#36699) Fix push time bug (go-gitea#36693) Add icon to buttons "Close with Comment", "Close Pull Request", "Close Issue" (go-gitea#36654) various fixes (go-gitea#36697) Add AI Contribution Policy to CONTRIBUTING.md (go-gitea#36651) Add some validation on values provided to USER_DISABLED_FEATURES and EXTERNAL_USER_DISABLED_FEATURES (go-gitea#36688) Rework e2e tests (go-gitea#36634) Remove unused functions (go-gitea#36672) Add migration http transport for push/sync mirror lfs (go-gitea#36665) Fix track time issue id (go-gitea#36664) Refactor inline style attributes (go-gitea#36652) Update Nix flake (go-gitea#36679) Upgrade gogit to 5.16.5 (go-gitea#36680) ... # Conflicts: # web_src/js/features/repo-issue-content.ts

* main: (24 commits) Instance-wide (global) info banner and maintenance mode (go-gitea#36571) Add created_by filter to SearchIssues (go-gitea#36670) Inline and lazy-load EasyMDE CSS, fix border colors (go-gitea#36714) Fix release draft access check logic (go-gitea#36720) Change image transparency grid to CSS (go-gitea#36711) Avoid opening new tab when downloading actions logs (go-gitea#36740) Add validation constraints for repository creation fields (go-gitea#36671) Fix SVG height calculation in diff viewer (go-gitea#36748) Fix path resolving (go-gitea#36734) [skip ci] Updated translations via Crowdin Fix track time list permission check (go-gitea#36662) Fix incorrect setting loading order (go-gitea#36735) Use case-insensitive matching for Git error "Not a valid object name" (go-gitea#36728) feat: Add workflow dependencies visualization (go-gitea#36248) Add keyboard shortcuts for repository file and code search (go-gitea#36416) Refactor text utility classes to Tailwind CSS (go-gitea#36703) Prevent redirect bypasses via backslash-encoded paths (go-gitea#36660) Fix force push time-line commit comments of pull request (go-gitea#36653) Fix get release draft permission check (go-gitea#36659) Move `X_FRAME_OPTIONS` setting from `cors` to `security` section (go-gitea#30256) ... # Conflicts: # web_src/css/base.css # web_src/css/index.css

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 22, 2026

github-actions bot added modifies/go Pull requests that update Go code modifies/templates This PR modifies the template files modifies/frontend labels Feb 22, 2026

silverwind added the type/refactoring Existing code has been cleaned up. There should be no new functionality. label Feb 22, 2026

silverwind and others added 4 commits February 22, 2026 11:52

Rename color functions to reflect they now return CSS classes

8ac95ed

Rename getIssueColor to getIssueColorClass and HTMLTypeColorName to HTMLTypeColorClass since they now return Tailwind CSS class names instead of plain color names. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Update test expectations for Tailwind CSS color classes

ce918f9

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Fix test expectations for Tailwind CSS color classes in commit status

4403f6d

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace .text.small and .text.truncate with Tailwind CSS classes

7e6a566

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind changed the title ~~Refactor text color classes to Tailwind CSS utilities~~ Refactor text utility classes to Tailwind CSS Feb 22, 2026

silverwind requested a review from Copilot February 22, 2026 13:21

Copilot started reviewing on behalf of silverwind February 22, 2026 13:27 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

models/issues/review.go Show resolved Hide resolved

wxiaoguang approved these changes Feb 22, 2026

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 22, 2026

lunny approved these changes Feb 22, 2026

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Feb 22, 2026

silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 22, 2026

Merge branch 'main' into twcolor

3ba8558

silverwind enabled auto-merge (squash) February 22, 2026 19:38

GiteaBot added 2 commits February 23, 2026 03:56

Merge branch 'main' into twcolor

9e12687

Merge branch 'main' into twcolor

897b3ca

GiteaBot and others added 3 commits February 23, 2026 04:57

Merge branch 'main' into twcolor

1656012

Merge branch 'main' into twcolor

fea6654

Merge branch 'main' into twcolor

c71d1da

silverwind merged commit 6e79913 into go-gitea:main Feb 22, 2026
26 checks passed

GiteaBot added this to the 1.26.0 milestone Feb 22, 2026

GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 22, 2026

silverwind deleted the twcolor branch February 23, 2026 00:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refactor text utility classes to Tailwind CSS#36703

Refactor text utility classes to Tailwind CSS#36703
silverwind merged 11 commits intogo-gitea:mainfrom
silverwind:twcolor

silverwind commented Feb 22, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

wxiaoguang commented Feb 22, 2026

Uh oh!

silverwind commented Feb 22, 2026

Uh oh!

silverwind commented Feb 22, 2026 •

edited

Loading

Uh oh!

wxiaoguang commented Feb 22, 2026 •

edited

Loading

Uh oh!

silverwind commented Feb 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

silverwind commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

wxiaoguang commented Feb 22, 2026

Uh oh!

silverwind commented Feb 22, 2026

Uh oh!

silverwind commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

silverwind commented Feb 22, 2026 •

edited

Loading

silverwind commented Feb 22, 2026 •

edited

Loading

wxiaoguang commented Feb 22, 2026 •

edited

Loading

silverwind commented Feb 22, 2026 •

edited

Loading