Skip to content

chore(frontend): migrate to Tailwind CSS v4 #378

Description

@Abhash-Chakraborty

Context

Dependabot's frontend-runtime group (#375) keeps trying to pull tailwindcss 3.4.18 → 4.3.3 alongside routine minor bumps. The major is currently failing frontend-check:

FAIL src/__tests__/private-map-style.test.ts
Error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS
with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

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

  • Install @tailwindcss/postcss and update postcss.config.* to use it instead of tailwindcss directly.
  • Port tailwind.config.ts to Tailwind v4's CSS-first @theme configuration in frontend/src/app/globals.css.
  • Keep the existing design tokens working: --near-white, --surface-soft, --surface-hover, --frost, --void, --muted, --silver, --blue, --red-soft and friends, including the light-mode overrides at globals.css:60.
  • Check tailwindcss-animate — it is a v3-era plugin and may need replacing with v4 equivalents.
  • Confirm maplibre-gl's stylesheet still processes cleanly; that import is what surfaces the failure in private-map-style.test.ts.

Acceptance criteria

  • pnpm check, pnpm test, and pnpm build all pass.
  • Every page renders correctly in both light and dark mode — screenshots of gallery, search, people, vault, trash, and settings in each theme attached to the PR.
  • No visual regression in the justified grid or the preview modal.
  • tailwind.config.ts is 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-dropzone 19, or @types/node 26 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    dependenciesPull requests that update a dependency fileenhancementNew feature, improvement, or enhancement request.frontendFrontend UI, state, and Next.js workgssoc26Related to GirlScript Summer of Code 2026.level:advancedGSSoC difficulty level: advanced. Base contributor points: 55.status: availableOpen for contributors to pick uptype:refactorCode refactor PR. GSSoC type bonus: +10 points.ui/uxUser interface, interaction, and visual polish

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions