Proper Tailwind CSS Theme Setup - Blank Slate Theme

With v0.75.0 and v0.75.1, it’s clear that this is something that is being worked on with Tailwind CSS and other build processes that utilize Node in mind, but I am struggling to find the best and most efficient way to use Hugo with Tailwind CSS.

I am really curious on getting it to work with the new hugo mod npm pack released in v0.75.0

This post from March mentions another way, but I can’t seem to make it work:

I realize @bep is quite possibly too busy to create this example (I’m not even sure how he makes time to eat!), but it seems this is still pretty unclear.

And more discussion:

It won’t let me post two links, so I am breaking this up…

The issue has even been brought up in the tailwindcss disccusion forum and elicted a response from one of the creators of tailwind:

I have also read this post from 22 days ago and tried getting it working with what was mentioned:

Is it possible for one of the community leaders to create an authoritative example on how to use Hugo with Tailwind CSS?

It was an absolute pain to get it working with Jekyll and use the native purge functionality, but I was able to.

I’d hate to see such a large community like Tailwind CSS to be left out of giving Hugo a try because it’s not well documented.

Thanks again for your help. Hugo has been an absolute pleasure to work with so far. It’s blown my mind.

It’s on my list of things to do. But life and work seem to get in the way.

You may, however, have seemed to noticed that some of the recent updates to Hugo has been geared towards the Tailwind/PostCSS combo, and I have a setup on my computer (a project + theme with Tailwind) that I intend to pull out (the setup, anyway) into a starter/template on GitHub.

I’m sorry that I haven’t gotten to this yet, but the time I have to spend on Hugo tends to come in … burts, and my priorities is not always in line with sensibility.

@bep - you responded in 5 minutes, so you are a madman! seriously, how do you find time to eat??

and yes, I did see a lot of news around this and it’s what has brought me back to giving Hugo a try

Looking forward to seeing your example when you have the time to post it.

Again, many thanks for creating a great piece of software and having such a great community around it.

1 Like

@bep you are incredible! do you sleep?

I’m using Tailwind (and it’s internal Purge) just fine without needing to install PostCSS at all.
I’m processing it using Tailwind’s builtin NPX script. I’m, though, not using a theme as I don’t need one.

Here’s the project running:

Here are my package.json scripts:

"scripts": {
        "hugo-server": "hugo server --disableFastRender",
        "hugo": "hugo --gc --minify",
        "hugo-dev": "hugo --gc --minify --config config-dev",
        "build-css": "npx tailwindcss build assets/css/tailwind.css -o assets/css/styles.css",
        "build-css-prod": "cross-env NODE_ENV=production npx tailwindcss build assets/css/tailwind.css -o assets/css/styles.css",
        "dev": "npm run hugo-server",
        "dev-css": "npm run build-css && npm run hugo-server"

And here Tailwind’s Purge config:

purge: {
        mode: 'all',
        content: ['./layouts/**/*.html'],
        options: {
            whitelist: [],

Whether you install it or Tailwind install it for you, I’m pretty sure you end up with the same PostCSS/Purge components.

You don’t need the postcss-cli in your setup, but there are several benefits of having it integrated with Hugo’s build pipeline.


For a simple project like mine, I didn’t bother to install the postcss-cli, but you are absolutely right. :slight_smile: