chore(deps): upgrade to Tailwind CSS v4 (#1104)#1123
Merged
Conversation
Migrate from Tailwind 3.4 to v4 (latest), keeping the existing JS theme config via the @config directive (theme colors are mapped to PrimeReact CSS variables, so a CSS-first @theme rewrite is avoided). - package.json: tailwindcss ^4, add @tailwindcss/postcss, bump @tailwindcss/forms 0.5.10 and typography 0.5.16, drop autoprefixer (v4 does vendor-prefixing natively via Lightning CSS), remove the unused and now-broken 'tailwind' CLI script - apps/knowii/postcss.config.js: use @tailwindcss/postcss - apps/knowii/src/styles.css: import tailwindcss/theme + preflight + utilities as separate layers so the PrimeReact theme stays interleaved between base and utilities; load JS config via @config; restore v3 default border color - templates: apply v4 utility renames (outline-none -> outline-hidden, shadow-sm -> shadow-xs, flex-shrink-0 -> shrink-0, flex-grow -> grow, bg-gradient-to-r -> bg-linear-to-r) Validated: nx build / lint / test all pass; built CSS still emits vendor prefixes (115) and resolves theme colors (var(--primary-500)). Needs visual QA before merge (v4 default changes + PrimeReact layering).
Add @tailwindcss/cli and restore the 'tailwind' script using the proper v4 CLI form (-i/-o; config is read from @config in the input CSS), plus a 'tailwind:watch' variant. Inspired by the obsidian-plugin-template setup.
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.
Closes #1104.
Upgrades Tailwind CSS 3.4 → v4 (latest). Keeps the existing JavaScript theme config via the
@configdirective — the theme colors map to PrimeReact CSS variables, so a CSS-first@themerewrite is intentionally avoided to minimize risk.Changes
tailwindcss^4, add@tailwindcss/postcss, bump@tailwindcss/forms0.5.10 /@tailwindcss/typography0.5.16, dropautoprefixer(v4 prefixes natively via Lightning CSS), remove the unused/brokentailwindCLI script.@tailwindcss/postcss.tailwindcss/theme+preflight+utilitiesas separate layers so the PrimeReact theme stays interleaved between base and utilities (preserves specificity order); load the JS config via@config; restore the v3 default border color.outline-none→outline-hidden,shadow-sm→shadow-xs,flex-shrink-0→shrink-0,flex-grow→grow,bg-gradient-to-r→bg-linear-to-r.Validation
nx build knowii— builds cleannx lint knowii/nx test knowii— passvar(--primary-500))This is the one thing automated checks can't cover. v4 changes some defaults (border/ring/shadow scale, etc.) and this app uses a custom PrimeReact + Tailwind CSS-layer integration. Please run the app and eyeball the key pages (landing, auth, dashboard, community/resource boxes, breadcrumb, waitlist box) before merging. Left unmerged for that reason.