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 and removes a stray @theme block that produced a build warning.

The changes are split into four 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).

4. fix(styles/shop): remove @theme inline from shop.css

src/styles/shop.css is injected as a plain <link> stylesheet (imported with ?url), so it never passes through the Tailwind pipeline. Its @theme inline block therefore generated no utilities but caused lightningcss to emit Unknown at rule: @theme warnings during build. The matching @theme inline block already lives in app.css (which Tailwind does process), so the block here was pure duplication. The two variables actually referenced inside this file (--color-shop-green, --color-shop-orange, used by the shop-pulse keyframes) are kept under :root.

Stats

• 39 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: passes; the Unknown at rule: @theme warning (previously emitted twice) is gone.
• tsc --noEmit: passes.
• Manually verified in the dev server across public pages (home, ethos, tenets, explore, support, workshops, partners, libraries, blog, learn, docs, builder/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.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1b9c9d85-85a8-4cf7-9eec-41aa6dd4990e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 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	6670e67	Commit Preview URL Branch Preview URL	Jul 07 2026, 12:53 PM