TailwindCSS 4.x - not generating classes from hugo_stats.json file

support
1

Hi there

I’ve installed Hugo (hugo v0.148.2+extended+withdeploy), tailwind (v4.0.8) using npm, installed a theme (hugo-discaptive) and configured my site to use the theme, in a branch of my repo. If I build the site and serve with the development server, it largely works as expected. If, however, I try to use a new tailwind utility class in a template, then the CSS file is not rebuilt with the extra classes.

Per the Hugo TailwindCSS docs, in my hugo.yaml file, I have set buildStats: enable to true. If I change a layout to use a new utility class, I can see the extra class being added to the hugo_stats.json file. So far, so good.

I have also set up an assets/css/input.css file, which includes @import "tailwindcss" and @source "hugo_stats.json"; and looks to load the Tailwind typography plugin. If I make changes to this file, hugo detects them and reloads.

My layout templates (especially partials) include a call inside the <head> element to templates.Defer loading of the head/css.html partial, which contains a resources.Get call to the css/output.css file and loads in the URL for the output.css (or various minified, fingerprinted versions). When I generate and (development) serve the site, the output.css file is updated and appropriately linked and served.

So, the issue seems to be that for whatever reason Tailwind isn’t picking up the correctly-updated hugo_stats.json file.

I’ve tried making sure my hugo.yaml contains the same configuration as examples, including combinations of cachebusting and notwatching, passing different paths to the @source call to make sure it finds the hugo_stats.json file. If I add other things to the css/input.css file, like, explicit @source inline(“bg-black”); calls, the bg-black class is not added to the output.css file. I have also tried using a tailwind.config.js file, though I understand this isn’t required for Tailwind 4.x.

Any ideas?

One thing I’m not sure about is where the assets/css/input.css file should be - in the theme directory or, like layout files, overridden by files in the project’s assets/css directory. For now, I have the same file in both places and edit both to be the same, though I think the version in the theme directory is being used.

Many thanks

David

2

Think I solved my own problems … posting here to help the next person with the same issue (at least until I get my site working and write something up).

The theme I used included a template that used resource.Get to source css/output.css. This should instead be css/input.css, which contains the CSS calls like @source hugo_stats.json; then be passed to css.TailWindCSS. The output.css file that it had been pointing to was the last version of the TailwindCSS-generated CSS, so it wasn’t changing …

Once this was done, Hugo and Tailwind were happy to use the input.css file from the project directory, rather than the theme directory, and to generate updated CSS files containing all the relevant utility classes.

1 Like