Tailwind v4 migration + CSS-output CI gate (follow-up to #73)#74
Merged
Grol-DBT merged 2 commits intoMay 18, 2026
Merged
Conversation
Tailwind v4 was the dependabot bump that took prod down on 2026-05-17 (black map). This commit makes the project actually compatible with v4 so the next bump can land safely. - postcss.config.js: switch to @tailwindcss/postcss (v4 split it out) - src/index.css: replace @tailwind directives with @import "tailwindcss"; keep tailwind.config.js via @config directive - SideMenu.tsx, Home.tsx: rename `rounded` -> `rounded-sm` and `hover:shadow` -> `hover:shadow-sm` (v4 renamed default scales) - Home.tsx: drop @material-tailwind/react entirely. It is only used to wrap a handful of divs/paragraphs/buttons with classes already in hand; the lib is 2 years stale, ships tailwind-merge@1.x (v3 era), and would have blocked any clean v4 upgrade. Verified locally: yarn install + yarn build emits a 13.3 kB CSS bundle containing all utilities (.w-full, .h-full, .flex, .rounded-sm, hover\:shadow-sm, custom @layer components). yarn lint, yarn test (17 files, 155 tests), and both tsc --noEmit passes are clean. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Regression gate for the 2026-05-17 black-map incident. When the tailwindcss v3 -> v4 dependabot PR merged, PostCSS silently dropped every utility from the bundle: lint, typecheck, and vitest all stayed green because none of them inspect emitted CSS. The Konva stage collapsed to 0x0 and prod rendered as a black page. After yarn build, this step greps dist/assets/*.css for sentinel utilities (.w-full, .h-full, .flex, .text-center) and fails the job if any are missing. Cheap, deterministic, and would have caught BattletechModders#62 before it shipped. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
nx-thaddeusaid
force-pushed
the
tailwind-v4-migration
branch
from
5e3a35f to
a04d5b8
Compare
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.
Summary
Long-term fix for the 2026-05-17 black-map incident. PR #73 reverted Tailwind to v3 to restore production; this PR makes the codebase actually compatible with Tailwind v4 so the next dependabot bump can land safely, and adds a CI gate that would have caught the original regression.
What changed
Tailwind v4 setup
postcss.config.js:tailwindcss: {}→'@tailwindcss/postcss': {}(v4 split its PostCSS plugin into a separate package).src/index.css:@tailwind base/components/utilities;→@import \"tailwindcss\";plus@config \"../tailwind.config.js\";so the existing JS config keeps applying.package.json:tailwindcss ^3.4.12 → ^4.3.0, add@tailwindcss/postcss ^4.3.0.Renamed-utility fixes
Tailwind v4 renames the bare scale steps. Two call sites were affected:
src/components/core/SideMenu.tsx:rounded→rounded-sm,hover:shadow→hover:shadow-sm.src/components/pages/Home.tsx:rounded→rounded-smin the Button.@material-tailwind/reactremovedUsed only in
src/components/pages/Home.tsx(Card/CardHeader/CardBody/CardFooter/Typography/Button) and only as styled wrappers — the className strings on the JSX already do all the layout/colour work via plain Tailwind utilities and the project's custom@layer componentsclasses. Replaced with native<div>/<p>/<button>elements.The
@material-tailwind/react@^2line is built on Tailwind v3. The3.0.0-betaline is 2 years stale and still shipstailwind-merge@1.x(v3 era). Removing the dep is cleaner than chasing a v4-compatible fork.CI smoke check
.github/workflows/test.ymlgets a new step afteryarn test:coverage:yarn build(withVITE_BASE_URL=/).dist/assets/*.cssfor sentinel utilities (.w-full,.h-full,.flex,.text-center) and fail the job if any are missing.This is the gap that let #62 ship: lint, typecheck, and vitest all stayed green because none of them inspect emitted CSS. The new check is independent of any future Tailwind / PostCSS major-bump path.
Test plan
yarn installclean (no new peer-dep warnings)yarn buildemits a 13.3 kB CSS bundle indist/assets/@layer components(.border-primary,.button-primary,.text-primary,.sideMenu-header,.ff-comfortaa) with correct rule bodiesyarn lint,npx tsc -p tsconfig.app.json --noEmit,npx tsc -p tsconfig.vitest.json --noEmityarn test: 17 files, 155 tests, all passyarn test:coverage: 79.95% statements / 82.07% lines (well above thresholds)yarn dev) serves 200 OK