chore: Tailwind CSS v3 → v4 migration #99

2026-03-08T01:34:24Z

chihlasm commented

2026-03-08 01:34:24 +00:00

(Migrated from github.com)

Summary

Phase 1: Ran official @tailwindcss/upgrade tool — upgraded to v4.2.1, deleted tailwind.config.js, migrated @theme + class names across 128 files
Phase 2: Switched from @tailwindcss/postcss to @tailwindcss/vite plugin, deleted postcss.config.js
Phase 3-4: Converted all colors to OKLCH, moved keyframes inside @theme, eliminated hsl(var(--)) double-indirection across 17 component files, fixed @custom-variant dark syntax

Key changes

CSS-first config via @theme block (no more tailwind.config.js)
OKLCH color system for better perceptual uniformity
@tailwindcss/vite for faster HMR (no PostCSS intermediary)
All keyframes defined inside @theme (v4 pattern)
Removed autoprefixer (built into v4)

Test plan

npm run build passes cleanly
tsc --noEmit passes
Zero remaining hsl(var(-- patterns in codebase
Visual QA: verify glassmorphism cards, gradients, sidebar nav, charts render correctly
Visual QA: verify toast notifications (success/error/warning/info) have correct colors
Visual QA: verify React Flow canvas (tree editor) background dots and controls
Visual QA: verify survey page renders correctly on mobile

🤖 Generated with Claude Code

## Summary - **Phase 1**: Ran official `@tailwindcss/upgrade` tool — upgraded to v4.2.1, deleted `tailwind.config.js`, migrated `@theme` + class names across 128 files - **Phase 2**: Switched from `@tailwindcss/postcss` to `@tailwindcss/vite` plugin, deleted `postcss.config.js` - **Phase 3-4**: Converted all colors to OKLCH, moved keyframes inside `@theme`, eliminated `hsl(var(--))` double-indirection across 17 component files, fixed `@custom-variant dark` syntax ### Key changes - CSS-first config via `@theme` block (no more `tailwind.config.js`) - OKLCH color system for better perceptual uniformity - `@tailwindcss/vite` for faster HMR (no PostCSS intermediary) - All keyframes defined inside `@theme` (v4 pattern) - Removed `autoprefixer` (built into v4) ## Test plan - [x] `npm run build` passes cleanly - [x] `tsc --noEmit` passes - [x] Zero remaining `hsl(var(--` patterns in codebase - [ ] Visual QA: verify glassmorphism cards, gradients, sidebar nav, charts render correctly - [ ] Visual QA: verify toast notifications (success/error/warning/info) have correct colors - [ ] Visual QA: verify React Flow canvas (tree editor) background dots and controls - [ ] Visual QA: verify survey page renders correctly on mobile 🤖 Generated with [Claude Code](https://claude.com/claude-code)

railway-app[bot] commented

2026-03-08 01:34:35 +00:00

(Migrated from github.com)

🚅 Deployed to the patherly-pr-99 environment in selfless-grace

Service	Status	Web	Updated (UTC)
hopeful-liberation	✅ Success (View Logs)	Web	Mar 8, 2026 at 2:56 am
patherly	✅ Success (View Logs)	Web	Mar 8, 2026 at 2:54 am

🚅 Deployed to the [patherly-pr-99](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=758824b5-ceca-41e4-b3b7-b75c8c383ff9) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | hopeful-liberation | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=144ed194-c1c9-467a-aefc-bca3801de8b0&environmentId=758824b5-ceca-41e4-b3b7-b75c8c383ff9)) | [Web](https://hopeful-liberation-patherly-pr-99.up.railway.app) | Mar 8, 2026 at 2:56 am | | patherly | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=271e0bc7-de42-4829-a5fb-16af6a4ef7a1&environmentId=758824b5-ceca-41e4-b3b7-b75c8c383ff9)) | [Web](https://patherly-patherly-pr-99.up.railway.app) | Mar 8, 2026 at 2:54 am |

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#99