-
Notifications
You must be signed in to change notification settings - Fork 105
chore(frontend): migrate to Tailwind CSS v4 #378
Copy link
Copy link
Open
Labels
dependenciesPull requests that update a dependency filePull requests that update a dependency fileenhancementNew feature, improvement, or enhancement request.New feature, improvement, or enhancement request.frontendFrontend UI, state, and Next.js workFrontend UI, state, and Next.js workgssoc26Related to GirlScript Summer of Code 2026.Related to GirlScript Summer of Code 2026.level:advancedGSSoC difficulty level: advanced. Base contributor points: 55.GSSoC difficulty level: advanced. Base contributor points: 55.status: availableOpen for contributors to pick upOpen for contributors to pick uptype:refactorCode refactor PR. GSSoC type bonus: +10 points.Code refactor PR. GSSoC type bonus: +10 points.ui/uxUser interface, interaction, and visual polishUser interface, interaction, and visual polish
Description
Metadata
Metadata
Assignees
Labels
dependenciesPull requests that update a dependency filePull requests that update a dependency fileenhancementNew feature, improvement, or enhancement request.New feature, improvement, or enhancement request.frontendFrontend UI, state, and Next.js workFrontend UI, state, and Next.js workgssoc26Related to GirlScript Summer of Code 2026.Related to GirlScript Summer of Code 2026.level:advancedGSSoC difficulty level: advanced. Base contributor points: 55.GSSoC difficulty level: advanced. Base contributor points: 55.status: availableOpen for contributors to pick upOpen for contributors to pick uptype:refactorCode refactor PR. GSSoC type bonus: +10 points.Code refactor PR. GSSoC type bonus: +10 points.ui/uxUser interface, interaction, and visual polishUser interface, interaction, and visual polish
Context
Dependabot's
frontend-runtimegroup (#375) keeps trying to pulltailwindcss3.4.18 → 4.3.3 alongside routine minor bumps. The major is currently failingfrontend-check:This blocks the whole group, including the safe minors in it. Splitting the migration out into its own PR unblocks Dependabot and gives the v4 port the review it actually needs.
Scope
@tailwindcss/postcssand updatepostcss.config.*to use it instead oftailwindcssdirectly.tailwind.config.tsto Tailwind v4's CSS-first@themeconfiguration infrontend/src/app/globals.css.--near-white,--surface-soft,--surface-hover,--frost,--void,--muted,--silver,--blue,--red-softand friends, including the light-mode overrides atglobals.css:60.tailwindcss-animate— it is a v3-era plugin and may need replacing with v4 equivalents.maplibre-gl's stylesheet still processes cleanly; that import is what surfaces the failure inprivate-map-style.test.ts.Acceptance criteria
pnpm check,pnpm test, andpnpm buildall pass.tailwind.config.tsis either removed or reduced to whatever v4 still requires, with a comment explaining what stayed and why.Notes for whoever picks this up
Do not bundle the TypeScript 7,
react-dropzone19, or@types/node26 upgrades from #375 into this. Those are separate issues; this one is Tailwind only.Start from
canary. The light/dark pass is the part that actually takes time — budget for it.