Proper Tailwind CSS Theme Setup - Blank Slate Theme

[mhal]

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:

Adding Tailwindcss

I would like to use the Tailwindcss framework with my Hug project. I’m not sure how to add this in rather than using their CDN. How can I add this to my project the right way?

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:

Proper way to set up theme with node dependencies

Hey all, I looked through a few repository examples but I’m not sure what the best way do this is. What I’d like to do is pretty straightforward — create a theme that I can reuse, that uses Tailwind CSS and other dependencies like AlpineJS. From what I can see, a lot of themes have a package.json in their theme folder. How does this transfer to a development environment and to deployment? Are node_modules installed within the theme folder? Do I also potentially have a package.json and node_mod…

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

[mhal]

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

Unclear how preserveHtmlElements works with Hugo · tailwindlabs/tailwindcss ·...

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

Proper way to set up theme with node dependencies

@schwartzmj i had my fair share of challenges in blending tailwind with hugo and below is the gist for your queries, i can write a follow up for my initial blog post if you can elaborate your needs and below answer doesn’t solve your queries in full. Code snippet taken from https://github.com/leelavg/thoughtexpo How does this transfer to a development environment and to deployment? In case of Hugo with Tailwind, we potentially need purgeCSS in deployment and faster renders in development For…

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.

[bep]

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.

[mhal]

@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.

[bep]

https://discourse.gohugo.io/t/tailwind-starter/28357/2

[mhal]

@bep you are incredible! do you sleep?

[sjardim]

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: https://events.brightline.org/

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: [],
        }
    },

[bep]

@sjardim

I’m using Tailwind (and it’s internal Purge) just fine without needing to install PostCSS at all.

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.

[sjardim]

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