Repository navigation
Conversation
Reviewer's GuideMigrates the frontend from Tailwind CSS 3 to 4.3.3 using a CSS-first theme and the dedicated PostCSS plugin, updates dependencies and shadcn configuration, translates affected utilities throughout the UI, and adds class-merging regression tests while preserving the existing design tokens and component variants. Flow diagram for the Tailwind CSS 3 to 4 migrationflowchart TD
V3["Tailwind CSS 3\nJavaScript config and plugins"] --> Migrate["Translate changed utilities\nand variants"]
Migrate --> V4["Tailwind CSS 4.3.3\nCSS-first theme"]
V4 --> Merge["tailwind-merge 3.7.0\ncn class merging"]
V4 --> Animate["tw-animate-css\naccordion animations"]
V4 --> Verify["Build, tests, typecheck\nand visual comparison"]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
This was referenced Oct 5, 2026
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
2 participants
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.
Description
Move the frontend from Tailwind CSS 3 to 4.3.3. The theme, dark-mode variant, container rule, and accordion animations now live in
app/globals.css. The build uses Tailwind's dedicated PostCSS plugin, andcomponents.jsonpoints the shadcn CLI at the CSS theme instead of a JavaScript config.Update utility names where Tailwind 4 changed their meaning, replace the old animation plugin with
tw-animate-css, and updatetailwind-mergesocn()handles Tailwind 4 classes. The existing colors, fonts, layout, and component variant names remain in place. This PR does not add shadcn lint rules; that can follow after the migration is reviewed.The changes follow the Tailwind 4 upgrade guide and shadcn's Tailwind 4 guidance.
Related issue
No linked issue.
Type of change
Checklist
Testing
Test environment
Tests performed
npm ciandnpm run buildpassed with the committed lockfile.npm testpassed: 195 tests in 19 files.npx tsc --noEmit,npm run lint,npm run i18n:check,npm run vocab:check, andgit diff --checkpassed. Lint reports its existing warnings.npx shadcn@latest inforecognizes Tailwind v4, the CSS theme, and all 21 installed UI components./loginpage with upstream main in headless Chrome at desktop light, desktop dark, and narrow mobile sizes. Each screenshot was pixel-identical to the baseline. This checks the public page; authenticated screens were not visually tested.Screenshots
No screenshots attached. The three local before-and-after comparisons had zero changed pixels.
Additional notes
Frontend development now requires Node.js 20 or newer; CI and Docker use Node.js 24. Tailwind 4 targets Safari 16.4+, Chrome 111+, and Firefox 128+. Its upgrade guide recommends staying on Tailwind 3.4 if older browsers are required.
#237 changes the frontend package manager and lockfile. If it merges first, this PR needs rebasing onto pnpm and its lockfile regenerated. A full Docker image build was not run locally.
Summary by Sourcery
Migrate the frontend styling infrastructure to Tailwind CSS 4 and update the application for its new configuration and utility conventions.
Enhancements:
Build:
Documentation:
Tests: