Skip to content

Conversation

@dave-atx
Copy link

@dave-atx dave-atx commented Jan 8, 2026

Upgrade the theme to use Tailwind CSS v4. This creates a few benefits:

  1. We're up to date with the latest and greatest with Tailwind, including things like configuration all in CSS / no JS.
  2. Enables the use of css.TailwindCSS so we can build an optimized main.css in Hugo as opposed to precompiling it separately
  3. Enables dark mode switching using media queries if the site has autoSwitchAppearance = true and footer.showAppearanceSwitcher = false (related: discussions Allow to switch to Tailwind CSS default Dark mode strategy #980 & Dark and light mode #102)
  4. Adds a new inlineMainCSS theme option (default false) that inlines the site's CSS into the HTML instead of referencing it via a <link> element. This is useful mostly for single page sites.

This is a (small) breaking change for site owners, so I think this would have to be the start of Congo v3.0 if merged:

  1. Site owners will need to run npm install --save-dev tailwindcss@4 @tailwindcss/cli @tailwindcss/typography since Tailwind is built every time the site is built now.
  2. Any custom color schemes will need to be updated. Tailwind wants variables to be 'natively defined', so a declaration like --color-neutral-50: 250, 250, 249; needs to be changed to --color-neutral-50: rgb(250, 250, 249);
  3. Anyone who has done advanced customization to Tailwind will want to consult Tailwind's upgrade docs to make sure what they're doing is still supported (v4 is compatible with the vast majority of v3 CSS) and incorporate their changes in assets/css/custom.css instead of precompiling their own version of Tailwind.

@netlify
Copy link

netlify bot commented Jan 8, 2026

Deploy Preview for hugo-congo ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 6a301e6
🔍 Latest deploy log https://app.netlify.com/projects/hugo-congo/deploys/696ad75a5de3f80008c00a46
😎 Deploy Preview https://deploy-preview-1128--hugo-congo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Jan 16, 2026
update schemes to use oklch(); move more CSS into @Utility directives to make more use of tailwind tree shaking for unused CSS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant