feat(build): upgrade Tailwind CSS 3 → 4 (CSS-first) - #58
Merged
Conversation
…ite) Migrated with the official @tailwindcss/upgrade codemod, then hand-fixed the theme system and prod build: - app.css: @tailwind directives → @import 'tailwindcss'; JS color config → @theme inline (inline is required — the theme colors reference --color-* vars that flip per [data-theme] at runtime); custom .btn-* / .theme-link classes → @Utility. - Fixed the teal-2026 neubrutalism shadow hooks for v4: the shadow scale renamed (old shadow-sm→shadow-xs, old shadow→shadow-sm) so the hand-written ink-shadow overrides were remapped to keep the same tiers; dropped the dead v3 --tw-shadow-colored no-ops. - Wired @tailwindcss/vite in vite.config.js; removed postcss.config.js, tailwind.config.js, and the @tailwindcss/postcss + postcss deps. - Dockerfile: drop the now-removed config files from the build COPY. - Codemod renamed utility classes across 69 blade templates. Verified locally: npm run build (TW4, 55 modules) + npm run dev (HMR, app.css served 200); all 69 blades compile (view:cache); and a component harness screenshotted under all three themes (teal-2026 / normie / gruvbox-dark) — colors swap correctly and the teal-2026 ink-shadows + breadcrumb pills render. Resolves #29. Unblocks #33 (forms 0.5.11 already TW4-compatible).
|
Warning Review limit reached
Next review available in: 25 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (75)
Warning
|
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.
What
Migrates the frontend to Tailwind CSS 4, CSS-first via
@tailwindcss/vite.resources/css/app.css:@tailwinddirectives →@import 'tailwindcss'; the JS color config (tailwind.config.js) →@theme inline; custom.btn-*/.theme-linkclasses →@utility;@plugin '@tailwindcss/forms'.tailwind.config.jsandpostcss.config.js; removed@tailwindcss/postcss+postcss+autoprefixerdeps.vite.config.js: wired@tailwindcss/vite.Dockerfile: dropped the removed config files from the buildCOPY.@tailwindcss/upgradecodemod renamed utility classes across 69 blade templates (pure class renames — verified no content loss).Two non-mechanical fixes (why this wasn't just the codemod)
@theme inline, not@theme. TEAL'stheme-*colors resolve to--color-*CSS vars that swap per[data-theme]at runtime.inlinemakes utilities reference those vars directly, so theme-switching keeps working.teal-2026neubrutalism shadows. v4 renamed the shadow scale (shadow-sm→shadow-xs,shadow→shadow-sm). The hand-written ink-shadow overrides targeted the old names, so post-codemod the ink tiers were scrambled on the prod-default theme. Remapped them to the new names (mechanism —--tw-shadow→box-shadow— still holds in v4) and dropped dead--tw-shadow-coloredno-ops.Verification (local)
npm run build✅ TW4, 55 modules,app.css70.7 → 81.7 kB (expected: v4 base/preflight)npm run dev✅ HMR,app.cssserved 200 via the vite pluginphp artisan view:cache✅ all 69 blades compileBefore merge
Since my visual check used a component harness rather than the live seeded app, worth a quick eyeball on a running instance — especially the
teal-2026default. Merging auto-deploys to prod.Resolves #29. Unblocks #33 (
@tailwindcss/forms@0.5.11already TW4-compatible).🤖 Generated with Claude Code