Tailwind CSS v4.0 Beta

support
1

I want to build a new theme and would like to try Tailwind CSS v4.0 Beta. Is Hugo v0.128 still the best reference? Do any of the more recent versions have any implications for this setup like js.Batch? Thanks, happy holidays.

2

There are apparently some improvements / fixes in the v.0.140.x releases. Given that Tailwind v4.0 introduces the “css-first configuration” there is likely no need for any JavaScript tooling. Quite surprising to me a CSS framework didn’t have that already.

3

The new css.TailwindCSS function in 0.128 is the thing for v4, but I would recommend upgrading to the latest – as there have been some related bug fixes (for one, I think there was a issue with CSS not being refreshed when running the server).

I have been using TailwindCSS v4 with Hugo very actively lately and it works very well. The only major issue I have found is that the intellisense plugin in VS code doesn’t work. There are similar upstream reports about this, so I assume this will be fixed.

2 Likes
4

As to the intellisense part, looks like we got some upstream attention: Tailwind Intellisense not working in VSCode · Issue #4 · bep/hugo-testing-tailwindcss-v4 · GitHub

1 Like
5

Have you been able to use a js config file? I know the point of v4 is to move away from the js config file, but it can be a lengthy upgrade on some projects, plus the Tailwind Typography in-house plugin is not ready to move away from a js config file.

Now Tailwind 4 lets you set a path to your js config file with:

/* /assets/main.css/ */
@config "./config/tailwind.config.js";

The problem is that I’m not sure where Hugo will be looking for this file when processing the main css using it. Right now the path set is relative to the main.css asset file so I have
main css > /assets/main.css
tailwind.config.js > /assets/config/tailwind.config.js

But when running Hugo (with templates.Defer) I get

Error: error building site: TAILWINDCSS: failed to transform "/css/main.css" (text/css): Error: Can't resolve './config/tailwind.config.js' in ...

Thanks!

6

The @config (and also @source) paths needs to be relative to PWD (e.g. the directory where Tailwind/Hugo is run from), which means that you in most cases want to do:

@config "tailwind.config.js";