TailwindCSS v4 notes / TODO1

[bep]

TailwindCSS v4 is now in beta: https://tailwindcss.com/docs/v4-beta

I have tested it and it works pretty great with the current version of Hugo.

Some notes and possible enhancements:

• @config seems to resolve from the root, so @config "tailwind.config.js" works fine in the common cases, but we may want to make that configurable from the Hugo side.
• I suspect the number one reason to have a config file is to set content sources (e.g. hugo_stats.json); these can also be set in the CSS with the @source; we may consider a way to control this from the Hugo side ...

[andrewconnell]

I thought one of the improvements in the beta release was removing the need for the configuration file, and instead doing everything in CSS?

REF: https://tailwindcss.com/docs/v4-beta#css-first-configuration

[bep]

I thought one of the improvements in the beta release was removing the need for the configuration file, and instead doing everything in CSS?

Sure, but you can still have one (and you may still sometimes need one). The task list above is just things I need to test out/check. One part of this equation that TailwindCSS does not support very well without any config, but which is an important part of how Hugo is set up, is a project set up of different file trees living in random corners of your disk.

[chrede88]

Tailwindcss v4 is now GA. Looking forward to official Hugo support☺️

[bep]

@chrede88 I have used all the Tailwind v4 alphas/betas and today the release version, and it works great with Hugo in the common setups. There are some known issues in more advanced setups that I will try to test and get into a Hugo release sometimes early next week.

See this project for a simple setup: https://github.com/bep/hugo-testing-tailwindcss-v4/tree/main/tailwindcss-cli-defer

[jloh]

Just another reference point, I have v4 setup in a branch for my site and switched to using the defer tailwindCLI setup in the above repo and it’s working perfectly 👍🏻