chore(website deps): upgrade Tailwind CSS from v2 to v4#25362
chore(website deps): upgrade Tailwind CSS from v2 to v4#25362thomasqueirozb wants to merge 15 commits intomasterfrom
Conversation
thomasqueirozb
added
the
no-changelog
|
Your preview site for the vector.dev will be ready in a few minutes, please allow time for it to build. Heres your preview link: |
thomasqueirozb
changed the title
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b15bef39bc
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| @source inline("search-input search-results-list search-result code-sample-filename type block border-gray-200 border-gray-300 border-r border-t font-medium h-2 h-3 h-full inline leading-relaxed mb-1 ml-1 mr-1 p-2 p-4 pl-2 py-4 text-gray-600 text-gray-800 text-sm w-2 w-3"); | ||
|
|
||
| /* Class-based dark mode via Alpine JS toggling .dark on <html> */ | ||
| @variant dark (&:where(.dark, .dark *)); |
There was a problem hiding this comment.
@variant applies an existing variant inside a rule block, but this statement attempts to redefine the dark variant selector; Tailwind v4 expects @custom-variant dark (...) for that. As written, dark:* utilities keep their default media-query behavior instead of being tied to the .dark class, so the site's manual theme toggle (which adds/removes .dark on <html>) will not reliably switch Tailwind dark styles unless the OS theme is also dark.
Useful? React with 👍 / 👎.
pront
left a comment
pront
left a comment
There was a problem hiding this comment.
Can we get someone from @vectordotdev/vector-website to review?
2 participants
Summary
Upgrades the vector.dev website's Tailwind CSS from v2.2.19 → v3 → v4.2.4 in two incremental steps, preserving visual parity with production throughout.
v2 → v3
purgewithcontent(pointing tohugo_stats.jsonvia a transform)variantsblock (JIT enables all variants by default)@variants hover { }directive (removed in v3)v3 → v4
tailwindcss+postcss-import+autoprefixerwith@tailwindcss/postcss(v4 bundles the others)tailwind.config.cjs— all config now lives inassets/css/style.cssvia@import,@theme,@variant,@plugin,@sourcepostcss.config.jsgenerates.hugo-classesfromhugo_stats.jsonat build time, capturing class names constructed at render time (e.g.text-{{ $color }})layouts/partials/css.htmlto skiptoCSSfor CSS files (LibSASS was following@import "tailwindcss"into the v4 package)dark:prose-dark→dark:prose-invertacross all templates (22 files)bg-opacity-*/ring-opacity-*utilities to the v4 slash syntax (bg-black/50,ring-black/5)Vector configuration
NA
How did you test this PR?
Ran a page comparison script against all 508 pages in the production sitemap: fetches each page from both
https://vector.devandhttp://localhost:1313, compares HTML class presence, verifies CSS rules exist for all classes, and resolves + compares color values from utility class definitions to catch palette mismatches. 508/508 pages pass with 0 failures; 5 expected v4 migration diffs are annotated (class renames, removed opacity utilities).Checkout to commit 7aba2f3 and run
npx tsx scripts/compare-pages.tsto replicate.Change Type
Is this a breaking change?
Does this PR include user facing changes?
no-changeloglabel to this PR.References
NA