/hugo-testing-tailwindcss-v4

A test/demo repo.

Primary LanguageCSSMIT LicenseMIT

Hugo v0.128.0 added improved support for the upcoming TailwindCSS v4.

This version is still in alpha, and there are still some missing pieces. This repo contains a few variants of how to set up TailwindCSS with Hugo as a test/documentation about what's working and what's not.

Notes below updated 2024-06-25:

General

TailwindCSS v4 alpha does not yet support custom a Tailwind configuration file. This means that there's currently no way to configure the input to TailwindCSS's build, e.g:

module.exports = {
	content: ['./hugo_stats.json'],
};

TailwindCSS scans text files for HTML identifiers starting from the project directory, and is very fast and smart about it. But this is a limitation we expect to be fixed before the final release.

Variants

TailwindCSS CLI Simple

Triggers CSS rebuild on changes to CSS or to layout files.

Benefits:

  • Simple to set up.
  • Works well in simple setups.

Drawbacks:

  • Triggers CSS rebuild on changes to layout files that's not related to style.
  • Does not work in more complex setups (e.g. HTML identifiers from Hugo Modules).

TailwindCSS CLI Defer

Only triggers CSS rebuilds when either CSS or the hugo_stats.json file changes.

Benefits:

  • Faster rebuilds when changing layout files that's not related to style.
  • Works in more complex setups (e.g. HTML identifiers from Hugo Modules).

Drawbacks:

  • Slightly more complex setup.

PostCSS CLI Defer

This is same as TailwindCSS CLI Defer, but using PostCSS CLI instead of TailwindCSS CLI.

Benefits:

  • Can use PostCSS plugins. But note that TailwindCSS v4 comes with autoprefixer and nesting built-in.

Drawbacks:

  • Slower builds (about 170ms vs 100ms for the others for this small setup).