Skip to content

Upgrade to Tailwind 4#7

Open
cboone wants to merge 7 commits intomainfrom
chore/upgrade-to-tailwind-4
Open

Upgrade to Tailwind 4#7
cboone wants to merge 7 commits intomainfrom
chore/upgrade-to-tailwind-4

Conversation

@cboone
Copy link
Owner

@cboone cboone commented Jan 23, 2026

No description provided.

claude and others added 6 commits January 23, 2026 11:09
- Add Tailwind CSS v4, @tailwindcss/postcss, and PostCSS dependencies
- Create postcss.config.js for Tailwind integration
- Create assets/css/main.css with all design tokens in @theme directive
- Convert all existing CSS (variables, reset, typography, components)
  to Tailwind v4's CSS-first configuration
- Update head.html to use Hugo's PostCSS pipe for processing
- Preserve all existing design tokens:
  - Major Third typography scale (11px-44px)
  - 6px-based vertical rhythm spacing
  - Light/dark mode color schemes
  - Notice/callout colors
  - Chroma syntax highlighting (GitHub light/dark)

The old CSS files in assets/css/base/ and assets/css/components/
are no longer used but preserved for reference during migration.

https://claude.ai/code/session_01KeUkP9MG5Lu7ZvSFecL9rf
- Scope color-scheme dark mode to only apply when no explicit theme is set
  (prevents conflict with manual theme toggle)
- Fix prefers-reduced-motion media query to use proper 'reduce' value
Addresses Copilot review feedback: document that postcss-cli@11
requires Node.js >=18.
- Add --text-subtle dark mode override for proper theming
- Replace focus outline removal with focus-visible styles
- Add accessible focus indicators for TOC summary
- Add explicit margin: 0 on body to avoid preflight dependency
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings January 23, 2026 17:09
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Upgrades the site’s styling pipeline to Tailwind CSS v4 via Hugo Pipes + PostCSS, consolidating CSS into a single entrypoint and adding the required Node/PostCSS tooling.

Changes:

  • Add PostCSS configuration for Tailwind v4 (@tailwindcss/postcss).
  • Update Node tooling dependencies (Tailwind v4, PostCSS + CLI) and set Node engine requirement.
  • Switch Hugo head partial to build a single assets/css/main.css stylesheet through PostCSS (with production minify + optional fingerprinting).

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
postcss.config.js Adds PostCSS plugin config to run Tailwind v4 via @tailwindcss/postcss.
package.json Introduces Tailwind/PostCSS toolchain in devDependencies and sets Node >=18.
package-lock.json Locks the newly added Tailwind/PostCSS dependency graph.
layouts/partials/head.html Replaces manual CSS concatenation with Hugo Pipes postCSS processing of css/main.css.
assets/css/main.css New consolidated Tailwind v4 entry CSS including theme tokens and layered styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Document npm install requirement in README.md and CLAUDE.md
- Add MIT license attribution for PaperMod-derived styles in main.css
- Remove unused CSS files from assets/css/base/ and assets/css/components/
  (consolidated into main.css during Tailwind v4 migration)
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 17 out of 18 changed files in this pull request and generated no new comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

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.

3 participants