chore(web): Tailwind CSS 4 with the Vite plugin, tw-animate-css, tailwind-merge 3 - #39
Merged
Conversation
…wind-merge 3 Ran `npx @tailwindcss/upgrade`: tailwind.config.js became an @theme block in globals.css (same hsl(var(--token)) colours and display font), and 20 files got the v4 utility renames (shadow-sm→shadow-xs, rounded→ rounded-sm, backdrop-blur-sm→-xs, bg-gradient-to-*→bg-linear-to-*, outline-none→outline-hidden, aspect-[3/4]→aspect-3/4). Hand edits on top of the codemod: - Use @tailwindcss/vite instead of the PostCSS route; postcss.config.js, postcss and autoprefixer are gone (v4 handles prefixing itself). - tailwindcss-animate → tw-animate-css (CSS-only successor; same animate-in/fade-in/zoom-in-95/slide-in-from-* class names). - tailwind-merge 2 → 3 (the v4-aware release). - Revert the codemod's false positive that renamed the Button/Badge `"outline"` variant name to `"outline-solid"`. - Drop the generated border-color compat layer: the base layer already applies border-border to *, so it was redundant. Verified: tsc, vite build (CSS 88 kB), vitest, oxlint/oxfmt, and a visual pass on home, catalog, Add Game dialog and leaderboard against the SQLite backend — no differences, no console output. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
chore(web): Tailwind CSS 4 with the Vite plugin, tw-animate-css, tailwind-merge 3
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Type
Summary
Re-lands #38. That PR was merged into the
chore/web-majorsbranch after #36 had already merged that branch intomain, somainstill has Tailwind 3 (web/tailwind.config.jspresent,"tailwindcss": "^3"). This PR's only diff againstmainis the single Tailwind commit from #38; see that PR for the full description.Short version: official
@tailwindcss/upgradecodemod (20 files of utility renames, config →@themeinglobals.css), then by hand:@tailwindcss/viteinstead of PostCSS,tailwindcss-animate→tw-animate-css,tailwind-merge3, and two codemod mistakes reverted ("outline"variant name, redundant border compat layer).Test plan
cd api && uv run pytest tests/ -v) — no API changes; skipped by path filtertsc,vite build,vitest(67),oxlint,oxfmt,npm audit0ci.ymlonly runs for PRs intomain)Breaking change?
🤖 Generated with Claude Code