/willmeyers' blog

Quickstart hugo and tailwind.css

Hugo and Tailwind CSS work really well together. Here's a five-step quickstart guide for anyone who's interested.

1. Create a new site

hugo new site mysite && cd mysite

2. Create a new theme

hugo new theme mytheme && echo "theme = 'mytheme'" >> config.toml && cd themes/mytheme

Add an index.html

echo "{{ define \"main\" }}<h1 class=\"text-2xl\">Hello world</h1>{{end}}" > layouts/index.html

3. Integrate tailwind css

npm init -y && npm i tailwindcss --save-dev && npx tailwindcss init

Replace tailwind.config.js with

module.exports = {
  content: ["content/**/*.md", "layouts/**/*.html"],
  theme: {
    extend: {},
  plugins: [],

Add and configure css files

mkdir -p assets/css && touch assets/css/tailwind.css && echo "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > assets/css/tailwind.css && touch assets/css/style.css

4. Add styles to head

{{ $style := resources.Get "css/style.css" | minify | fingerprint }}    
<link rel="stylesheet" href="{{ $style.Permalink }}"> 

5. Configure package.json

Add tailwind scripts to package.json

"scripts": {
    "build": "npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css",
    "watch": "npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css -w"

All set


hugo server -D

and within your theme directory,

npm run watch

And the result is...

willmeyers' bear blog