# Adding Tailwind CSS to a Hugo blog

DevFeed: [Adding Tailwind CSS to a Hugo blog](<https://devfeed.tech/articles/adding-tailwind-css-to-a-hugo-blog-25341.md>)

Original publisher: [Read original article](<https://kau.sh/blog/tailwind-hugo/>)

Author: Kaushik Gopal

Published: 2024-07-05T18:36:23Z

Content type: tutorial

Language: en

Sources: [Kaushik Gopal's Site](<https://devfeed.tech/sources/kaushik-gopal-s-site.md>)

Topics: [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Hugo](<https://devfeed.tech/topics/hugo.md>), [CSS](<https://devfeed.tech/topics/css.md>), [make](<https://devfeed.tech/topics/make.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>)

Tags: [cli](<https://devfeed.tech/tags/cli.md>), [css](<https://devfeed.tech/tags/css.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [hugo](<https://devfeed.tech/tags/hugo.md>), [installation](<https://devfeed.tech/tags/installation.md>), [make](<https://devfeed.tech/tags/make.md>), [npm](<https://devfeed.tech/tags/npm.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>)

## AI overview

A tutorial showing how to add Tailwind CSS v4 to a Hugo site using Tailwind CLI, including installation, CSS file setup, development commands, and a Makefile workflow for running or building Hugo and Tailwind together.

## Source excerpt

Updated for Tailwind CSS V4 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.1 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