Add Tailwind to Hugo

1. Create a new site

hugo new site blog
cd blog

2. Create a new theme

hugo new theme my-theme
cd my-theme

Update site config to use the theme

theme = 'my-theme'

3. Add Tailwind to a Hugo theme

cd .\themes\my-theme\

Install Tailwind

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

Inside tailwind.config.js replace all

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

3. Create CSS Assets

Create style.css and tailwind.css

Inside tailwind.css add

@tailwind base;
@tailwind components;
@tailwind utilities;

Add styles to head partial

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{{ $style := resources.Get "css/style.css" | minify | fingerprint }}    
<link rel="stylesheet" href="{{ $style.Permalink }}">

5. Configure package.json

Inside package.json add

"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"
}

6. Add some Tailwind utilities to index

{{ define "main" }}
  <h1 class="text-2xl text-center text-blue-700">Hello world</h1>
{{ end }}

7. Run

Within your theme directory

npm run watch

hugo server