refactor(*): migrate deprecated Tailwind v3 utility classes to v4

[sukvvon]

Summary

This project uses Tailwind CSS v4 (tailwindcss@^4.2.2, @tailwindcss/vite), but several v3-era utility classes that were removed or renamed in v4 remained in the codebase. This PR migrates them.

The changes are split into three logical commits.

Changes

1. fix(admin/roles): bg-opacity-50 → bg-black/50 (1 occurrence)

bg-opacity-* was removed in v4. The class was no longer generated, so the modal backdrop lost its opacity. Replaced with the slash opacity modifier.

• src/routes/admin/roles.$roleId.tsx

2. refactor(*): flex-shrink-0 → shrink-0 (33 occurrences, 16 files)

flex-shrink-* was removed in v4 in favor of shrink-*.

3. refactor(*): bg-gradient-to-* → bg-linear-to-* (60 occurrences, 25 files)

bg-gradient-* was renamed to bg-linear-* in v4 (to distinguish it from the new radial/conic gradient utilities).

Stats

• 38 files changed
• bg-opacity-50 → bg-black/50: 1
• flex-shrink-0 → shrink-0: 33
• bg-gradient-to-* → bg-linear-to-*: 60

Verification

• vite build and tsc --noEmit: both pass.
• Verified on the deployment preview across public pages (home, shop, ethos, tenets, explore, support, workshops, partners, libraries, blog, learn, showcase, feedback-leaderboard, intent/registry, docs): no leftover flex-shrink-0 / bg-gradient-to-* / bg-opacity-* classes, new utilities render correctly, no visual regressions, and no CSS-related console errors. bg-black/50 resolves correctly (oklab(0 0 0 / 0.5)).

Summary by CodeRabbit

• Style
  • Updated many UI elements to use modern gradient utility classes, resulting in more consistent background styling across pages, cards, banners, and overlays.
  • Standardized icon and avatar containers to better control shrinking behavior in various lists, menus, and headers.
  • Refined a few badge, divider, and overlay styles for cleaner visual consistency throughout the app.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dd849b55-66c5-4af4-83f2-08bc9ebed7f3

📥 Commits

Reviewing files that changed from the base of the PR and between 0b90bdb and abf86e8.

📒 Files selected for processing (38)

• src/components/BlogAuthorFilter.tsx
• src/components/CopyPageDropdown.tsx
• src/components/DocFeedbackNote.tsx
• src/components/DocFeedbackProvider.tsx
• src/components/FeedbackLeaderboard.tsx
• src/components/FilterComponents.tsx
• src/components/FrameworkCard.tsx
• src/components/LibraryCard.tsx
• src/components/LibraryTestimonials.tsx
• src/components/Navbar.tsx
• src/components/PartnersGrid.tsx
• src/components/PlaceholderSponsorPack.tsx
• src/components/RightRail.tsx
• src/components/Select.tsx
• src/components/ShowcaseGallery.tsx
• src/components/UserFeedbackSection.tsx
• src/components/game/IslandExplorer.client.tsx
• src/components/game/ui/CompleteOverlay.tsx
• src/components/game/ui/GameHUD.tsx
• src/components/game/ui/GameOverOverlay.tsx
• src/components/stack/CategoryArticle.tsx
• src/routes/account/feedback.tsx
• src/routes/account/integrations.tsx
• src/routes/admin/index.tsx
• src/routes/admin/npm-stats.tsx
• src/routes/admin/roles.$roleId.tsx
• src/routes/admin/users.$userId.tsx
• src/routes/builder.docs.tsx
• src/routes/ethos.tsx
• src/routes/explore.tsx
• src/routes/index.tsx
• src/routes/intent/registry/index.tsx
• src/routes/learn.tsx
• src/routes/partners.index.tsx
• src/routes/partners.railway.tsx
• src/routes/support.tsx
• src/routes/tenets.tsx
• src/routes/workshops.tsx

---

📝 Walkthrough

Walkthrough

This PR performs a broad Tailwind CSS utility class migration across components and routes: flex-shrink-0 is replaced with shrink-0, and bg-gradient-to-* variants are replaced with bg-linear-to-* equivalents. One modal backdrop also switches from bg-black/50 to bg-black bg-opacity-50. No logic, props, or component behavior changes.

Changes

Tailwind Utility Class Migration

Layer / File(s)	Summary
Shared UI components src/components/BlogAuthorFilter.tsx, src/components/CopyPageDropdown.tsx, src/components/DocFeedbackNote.tsx, src/components/DocFeedbackProvider.tsx, src/components/FeedbackLeaderboard.tsx, src/components/FilterComponents.tsx, src/components/FrameworkCard.tsx, src/components/LibraryCard.tsx, src/components/LibraryTestimonials.tsx, src/components/Navbar.tsx, src/components/PartnersGrid.tsx, src/components/PlaceholderSponsorPack.tsx, src/components/RightRail.tsx, src/components/Select.tsx, src/components/ShowcaseGallery.tsx, src/components/UserFeedbackSection.tsx, src/components/stack/CategoryArticle.tsx	Replaces flex-shrink-0 with shrink-0 and bg-gradient-to-* with bg-linear-to-* across avatars, icons, badges, and gradient backgrounds.
Game UI components src/components/game/IslandExplorer.client.tsx, src/components/game/ui/CompleteOverlay.tsx, src/components/game/ui/GameHUD.tsx, src/components/game/ui/GameOverOverlay.tsx	Replaces bg-gradient-to-* gradient classes with bg-linear-to-* in overlay backgrounds, health bars, cooldown gauges, and notification containers.
Account and admin routes src/routes/account/integrations.tsx, src/routes/admin/index.tsx, src/routes/admin/npm-stats.tsx, src/routes/admin/roles.$roleId.tsx, src/routes/admin/users.$userId.tsx	Replaces flex-shrink-0 with shrink-0 on avatars/icons/buttons, bg-gradient-to-br with bg-linear-to-br on cards, and updates one modal backdrop from bg-black/50 to bg-black bg-opacity-50.
Marketing and content routes src/routes/builder.docs.tsx, src/routes/ethos.tsx, src/routes/explore.tsx, src/routes/index.tsx, src/routes/intent/registry/index.tsx, src/routes/learn.tsx, src/routes/partners.index.tsx, src/routes/partners.railway.tsx, src/routes/support.tsx, src/routes/tenets.tsx, src/routes/workshops.tsx	Replaces bg-gradient-to-* with bg-linear-to-* and flex-shrink-0 with shrink-0 across headers, badges, dividers, icons, and testimonial cards; adds check/star icons in workshop benefit lists.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

• TanStack/tanstack.com#935: Overlapping styling changes in src/components/stack/CategoryArticle.tsx badge gradient classes.

Suggested reviewers: KevinVandy

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the PR’s main Tailwind v3→v4 utility migration.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/tailwind-v4-deprecated-utilities

---

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	abf86e8	Commit Preview URL Branch Preview URL	Jul 08 2026, 12:33 AM