Skip to content

feat(deps): migrate to Tailwind CSS v4 + fix mobile sidebar clipping#13

Merged
PythonWoods-Dev merged 1 commit intomainfrom
test/tailwind-v4
Apr 17, 2026
Merged

feat(deps): migrate to Tailwind CSS v4 + fix mobile sidebar clipping#13
PythonWoods-Dev merged 1 commit intomainfrom
test/tailwind-v4

Conversation

@PythonWoods-Dev
Copy link
Copy Markdown
Contributor

@PythonWoods-Dev PythonWoods-Dev commented Apr 17, 2026

Summary

  • Tailwind CSS v3 → v4.2.2: removes tailwind.config.js; migrates darkMode and custom
    theme values to CSS-first directives (@custom-variant, @theme) in src/css/custom.css.
    PostCSS plugin updated to @tailwindcss/postcss. Preflight (@layer base) intentionally
    excluded — it appears after @layer docusaurus.infima in the final bundle and would override
    Infima, breaking layout.
  • Fix mobile sidebar clipping (pre-existing, affects v3 too): backdrop-filter: blur(8px)
    applied directly to .navbar created a CSS containing block for position:fixed descendants
    in spec-compliant browsers. .navbar-sidebar { position:fixed; top:0; bottom:0 } was scoped
    to the navbar height (~3.5rem), hiding all nav items. Fix: move backdrop-filter to
    .navbar::before pseudo-element.

Test plan

  • npm run build passes for both en and it locales
  • npm run typecheck passes
  • Dark mode: dark: utility classes apply correctly under [data-theme="dark"]
  • Mobile viewport: hamburger opens full-height sidebar with all nav items visible
  • Desktop: navbar blur effect still visible
  • Light/dark theme switch: no visual regression

- Upgrade tailwindcss 3.x → 4.2.2 (@tailwindcss/postcss replaces tailwindcss PostCSS plugin)
- Remove tailwind.config.js; migrate darkMode variant and theme extensions to CSS-first
  (@custom-variant, @theme) in src/css/custom.css
- Import tailwindcss/theme + tailwindcss/utilities only (preflight excluded to prevent
  @layer base from overriding @layer docusaurus.infima in the final bundle)
- Fix mobile sidebar clipping: move backdrop-filter: blur(8px) from .navbar to .navbar::before
  pseudo-element — direct backdrop-filter on a position:fixed ancestor creates a containing
  block that clips the sidebar to navbar height (~3.5rem) instead of the full viewport
@PythonWoods-Dev PythonWoods-Dev merged commit 5b65916 into main Apr 17, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant