Some resources for TailwindCss v4

I am in no hurry to use Tailwind V4 but look around anyway.

Here are some links that can give some inspiration… Those are not guides, just for getting some ideas how people do it:

PS: I am not related to any of them.

2 Likes

Thanks for the links. Was just thinking about picking up tailwind now that v4 is out and it looks like it plays happily with Hugo.

1 Like

Thanks a lot for sharing my project :beers:

Welcome.

Maybe you can do a tutorial for the minimum setup. That would be helpful.

I recently upgraded my site to v4 and wrote about the process in this blog post. Hope it helps.

2 Likes

The current recommended setup is documented here:

1 Like

I’m quite new to hugo as well as tailwind and I’m a bid confused, if the css.TailwindCSS documentation requires css.PostCSS as well to be installed and configure, as there is a reference in the required hugo.toml build.cachebusters configuration?

Can you point to where it says that?

It does not say it explicitly, but when you look at the toml content, you see the reference.

  [[build.cachebusters]]
    source = '(postcss|tailwind)\.config\.js'
    target = 'css'

This documentation also is talking about using the tailwind/cli, while the original tailwind installation is referencing to tailwind/postcss.

You might be using PostCSS as well (we have no idea if you are or are not), in which case you’ll need to bust the cache.

:wink: as a total newby, I don’t even understand the whole purpose of cachebusting and/or postcss in the hugo context yet.

I’m just trying to get a basic setup of hugo + tailwind to run and am confused by the tailwind documentation, the hugo documentation and all stuff that chatgpt and deepseek are telling me (as they seem to be trained only on older integrations of tailwind v3).

I suggest you follow the Hugo documentation.

alright, can I then just leave out the cachebuster related config?

NO. That’s why it is in the documentation.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.