chore(web): migrate to Tailwind CSS 4 (fixes braces alert)

[Musiker15]

Description

Clears the last open Dependabot alert: braces (GHSA-vfj7-8cjw-p6xm, high). There is no patched braces release (3.0.3 is the newest), and it only came in through Tailwind 3 (chokidar / micromatch). Tailwind 4 depends on neither, so after this migration pnpm audit reports no known vulnerabilities.

What changed:

• Ran the official @tailwindcss/upgrade tool:
  • tailwind.config.ts → @theme / @utility / @custom-variant in globals.css.
  • PostCSS now uses @tailwindcss/postcss; autoprefixer is dropped because v4 handles prefixing.
  • v4 utility renames: shadow-sm→shadow-xs, outline-none→outline-hidden, backdrop-blur→backdrop-blur-sm, start-*/end-*→inset-s-*/inset-e-*, …
• Reverted two false positives from the tool:
  • It rewrote the Button variant "outline" to "outline-solid", which broke the build.
  • It renamed a test description.
• Removed tailwindcss-animate. It was never used.
• Kept the v3 cursor: pointer on buttons via a base rule, because v4's preflight dropped it.
• Kept the hero headline's line-height. In v3, md:text-5xl / lg:text-6xl silently overrode leading-[1.08]; v4 honours explicit leading, so md:leading-none pins the old look.
• Pointed prettier-plugin-tailwindcss at the v4 stylesheet (tailwindStylesheet), so class sorting still knows the theme colours. Without it, Prettier reshuffles every class list that uses theme colours.
• README: Styling → Tailwind CSS 4.

Visual check

I captured screenshots of 17 pages (landing, pricing, stats, terms, public form, and the dashboard pages via a seeded demo guild) in light and dark mode, at 1280px and 390px wide, on main and on this branch, and pixel-diffed them.

• Dashboard pages: unchanged to the eye (max colour delta ≤ 16/255, on card edges only).
• Two intentional-looking differences remain. Both are latent v3 bugs that v4 now renders the way the code says:
  1. Card shadows. v3 parsed shadow-card as a shadow colour (from the theme colour card), so every Card had an invisible white shadow, including the hero preview card with shadow-lg. v4 applies --shadow-card (very subtle) and a real grey shadow-lg. The hero preview card now has a visible drop shadow.
  2. .eyebrow labels ("PLATFORM STATS", "PLANS", …). They use font-family: var(--font-mono). That variable didn't exist in v3, so the labels fell back to Inter. v4 defines it via @theme, so they now render in JetBrains Mono, which is what the CSS comment ("small MSK-green mono kicker") intends.

Please give the landing page a quick look before merging. If you'd rather keep the old look for either, it's a one-line change.

Type of change

• Bugfix
• New feature
• Breaking change
• Refactor / tech debt
• Docs / CI

Checklist

• pnpm lint, pnpm typecheck, pnpm build pass locally (pnpm test too)
• Tests added/updated (where it makes sense)
• Prisma migration included (if the schema changed)
• No secrets / .env values committed
• Security implications considered (input validation, authz, CSP)
• Docs updated if architecture is affected

Linked issues

Dependabot alert for braces (GHSA-vfj7-8cjw-p6xm).

🤖 Generated with Claude Code

https://claude.ai/code/session_013PFFqaQmGt6UGbESddu5sz

---

Generated by Claude Code

[graphify-labs]

Graphify reviewed this change.

Worth a look — the grounded gate found no coupling regressions or blocking issues, but 1 advisory finding(s) below merit a look before merge.

---

Graphify review — findings

Upgrades the web app from Tailwind CSS 3 to 4, swapping in @tailwindcss/postcss and moving the theme tokens, animations, container and the pwa-safe-* utilities from JS config into CSS-first @theme/@utility blocks in globals.css. Compatibility base styles restore the v3 default border color and pointer cursor on buttons, so existing markup looks unchanged. Class names are renamed to the v4 scale (shadow-sm → shadow-xs, start-6 → inset-s-6), and Prettier's Tailwind plugin now reads the new stylesheet for class sorting.

Worth a look

• Deleting tailwind.config.ts drops the packages/ui source glob and the theme config — apps/web/tailwind.config.ts:7 · Escalate · medium
  • agreed by 2 of 2 members but NOT verified (no proof, no reproducing execution) — consensus is not a verdict; needs human review

Review partial — this diff was larger than one review pass covers, so later files were not reviewed; some findings may be missing.

Analysis details — impact, health, verification

Impact & health

Graphify review

Impact — 191 functions depend on the 189 functions this change touches.

Health — this change adds coupling hotspots:

• new: SiteHeader() — 1 callers, 6 callees
• new: PublicFormPage() — 0 callers, 19 callees
• new: SubmissionStatusPage() — 0 callers, 10 callees
• new: FormPreviewPage() — 0 callers, 8 callees
• new: SubmissionDetailPage() — 0 callers, 8 callees

Verification — 191 functions in the blast radius were not formally verified this run (proofs are advisory here).

Health delta baseline: last indexed commit 112f2e2 (diverged from this PR's base — delta is approximate).

Gate & verification

graphify gate

PASS — objectively clean (no health regressions, tests not run — proofs not run this pass (advisory)). Grounded, not self-assessed.

Advisory (not blocking):

• verification_scope: 191 function(s) in the blast radius were not formally verified this run

· 5 more finding(s) on lines outside this diff (see the check run).