I veer away from CSS frameworks like Bootstrap because they result in sterilized designs. On a recent side project, I gave Tailwind CSS a try and am now a believer. “Rapidly build modern websites without ever leaving your HTML” makes a lot of sense to me.

Case in point: I rebuilt my Hugo theme, Henry, with Tailwind in three days¹. I quite like how it’s turned out. Let me show you how to add it to a Hugo theme. This has become even simpler with Tailwind CSS v4.

Approach

I like to keep things as simple as possible. So, it was important for me to use both Hugo & Tailwind as you would independently.

I don’t use Tailwind as a PostCSS plugin as much of the internet recommends. I prefer Tailwind CLI.

Installation

Let’s assume you created your new site with hugo:

hugo new site my-blog
cd my-blog

From this root hugo project directory:

# create a package.json file (with default options)
npm init -y

# install Tailwind CSS as a dependency
npm install -D tailwindcss @tailwindcss/cli

Let’s create the necessary css files for Tailwind to latch on to:

mkdir -p my-blog/assets/css
touch 	 my-blog/assets/css/input.css
touch 	 my-blog/assets/css/theme.css

I use the input.css file to help Tailwind wire everything together, and output.css is the final css that Tailwind compiles out.

/* input.css */
@import "tailwindcss";

@import "./theme.css";

/* custom css you might want to add as overrides */

That’s it! You can now fire up Tailwind & Hugo:

# start tailwind
npx @tailwindcss/cli \
		-i ./assets/css/input.css  \
		-o ./assets/css/output.css \
		--watch

# start hugo server
hugo server

Bonus tip

Starting Tailwind and Hugo separately in two different shells is a bore. I use a Makefile that conveniently allows me to spin up both processes in parallel.

All I have to do when I’m ready to spin up my blog locally is:

# runs the default comand which is "run"
# it runs both taliwind css & the hugo server in parallel
make

Sometimes I want to just build the site, not run the servers:

make build

This runs the hugo build command and the tailwind css build command btw.

You can take a look at my Makefile to see how all the commands are wired up:

Just use Henry

If you just want a solid Hugo theme that uses Tailwind and is easy to get up and running, just use Henry. This is everything you need to do:

# brew install hugo
hugo new site blog-henry
cd blog-henry
git clone https://github.com/kaushikgopal/henry-hugo.git themes/henry

mkdir -p assets/css
cp themes/henry/assets/css/input.css assets/css/

# brew install node # if you don't have npm installed
npm init -y
npm install -D tailwindcss @tailwindcss/cli

echo 'theme = "henry"' | cat - hugo.toml > temp && mv temp

cp themes/henry/Makefile ./
make

Revisions

• Upgrade to Tailwind CSS v4.
• Remove convoluted Procfile + foreman setup with much simpler Makefile.
• Changed the instructions to do the npm install of tailwind in my blog folder vs the theme. This allows more flexibility in customizing via tailwind.