I saw many outdated tutorials and blogs on how to setup tailwind + postCSS with Hugo but they seems to be hacks and with version change from tailwindcss 2 > tailwindcss 3 do not work anymore. there is no official recommendation from tailwind or Hugo on how to setup these 2 properly.
Hugo have out of the box postCSS support so thats 50% work already done. what is the best way to setup just tailwind using Hugo’s way of doing things and benefit of the Hugo’s build in postCSS.
On a brand new Hugo site with a brand new empty Hugo theme. preference will be to install in theme directory so I can reuse the same setup on multiple sites
Any recommendation or support on this will be greatly appreciated thanks
This guy @Jonas_D makes an excellent fix something that I will prefer to use tailwind without external npm scripts. Now as a beginner in Hugo, I see too many different ways all hit a wall at some point due to this or that. what is the Hugo recommended way of implementing tailwind because I do not know which way it will spin in future. so an official response will be greatly appreciated and more stable than me running behind different Hugo hacks
Hi @bwintx thanks for your response I read this post yesterday and I read your post today and the the fact
fix has slipped from one Hugo version “milestone” to another—from 0.82 to 0.89
I realise that it is an ongoing problem with no full solution still now, I see hacks and workarounds. So as a beginner I wonder if going forward I have to choose between tailwind and Hugo.
I haven’t yet tried the @Jonas_D solution, no, but I saw favorable comments from others who have.
As for whether you’ll have to choose between Hugo and Tailwind, I can tell you from hard experience that it’s a lot easier to switch CSS frameworks than it is to switch SSGs. So, if Hugo otherwise meets your needs but you’re utterly committed to Tailwind, perhaps you could live with the current workarounds until an official Hugo solution arrives. (And, in fairness to @bepet al., Tailwind keeps moving the goalposts, even if for good reasons.)
@bwintx you are right but as a beginner I am still exploring Hugo. It is really fast when creating many pages and the code is way cleaner then what nextjs export but catchup with modern web technologies/libraries seems to be slower for example avif or tailwindcss etc.
Video tutorials and blogs are hard to find or are outdated when comparing to nextjs or tailwind for example. without the tutorials of Mike Dane from 5 years ago it will be way difficult to understand Hugo.
Great site generator, but 10 times more difficult to learn comparing to other similar tools due to lack of uptodate beginner tutorials/content/solutions.
I couldn’t agree more. Hugo is very powerful and we use it specifically because it has some features, that Nextjs or Gatsby simply don’t have - but its not transparent to new users or juniors why Hugo might be a better choice in some situations.
As a hugo newcomer, I agree about the lack of up-to-date tutorials/information.
The documentation is pretty good, but it takes some time to sink in. And there tends to be large holes in functionality that’s not particularly explained or places where English may not have been very clear. I’m not complaining, I’m very thankful there is legible documentation and I will commit corrections I come across as I learn.
But I see a red flag in the forum about a tailwindcss 3 issue, and I’m immediately questioning if Hugo is the right choice at this stage, as I play to use tailwind for this project down the road.
I haven’t read into it much yet, I followed the two conversations I saw on it. But knowing it might not work is an eerie feeling. Obviously we’re welcome to learn, and commit fixes. But I don’t think anyone would want my shitty code.
Out of the box, Hugo is a wickedly powerful tool and that kept me coming back. And I hope to continue to learn and contribute up-to-date documentation and tutorials when I am confident I’m not an idiot. But until then, it’s a slow process with a lot of googling / searching to find answers. I do often wish there was an active discord to just have an open conversation about how to accomplish something or better work with hugo, but those chat rooms get repetitive for the knowledgeable and fade out.
I agree I see that learning the basics is easy thanks to Mike Dane but then you stuck for advance topics Hugo documents doesn’t even mention tailwind anywhere. An open discussion form for Hugo integrations will be great as I see most attempts to this kind of discussions are aggressively silenced with the response it is not Hugo related.
Now Hugo is really powerful and here is an example:
I can build thousands of pages using a script with the code provided by @jmooringHugo new command - #9 by jmooring all I need to do is use wordpress to json plugin and then run this script to import and generate all Wordpress pages as markdown pages in Hugo.
(@bwintx if you writing blog here is an idea on how to convert large wordpress blog site to Hugo with simple script - I generate 3000+ pages really fast)
but getting that info was difficult almost impossible as someone told me I am asking too much (egg-laying wool-milk-pig). Now the same logic play here, Hugo already have postCSS builit in. So installing postscss again via npm for Hugo server doesn’t make any sense (to me).
and I think @bep should do something to encourage content creators as searching for nextjs/tailwind on YouTube I can find so many tutorials update, news, tricks. but searching for Hugo there are really few 3-4 people creating new content for Hugo.
that it’s a lot easier to switch CSS frameworks than it is to switch SSGs. So, if Hugo otherwise meets your needs but you’re utterly committed to Tailwind, perhaps you could live with the current workarounds until an official Hugo solution arrives. (And, in fairness to 
But point taken.