Install Tailwind CSS with Hugo

Setting up Tailwind CSS in a Hugo project.

Create your project

Start by creating a new Hugo project if you don't have one set up already.

Terminal

hugo new site --format yaml my-sitecd my-site

Install Tailwind CSS

Install the Tailwind CSS CLI v4.1 or later.

Terminal

npm install --save-dev tailwindcss @tailwindcss/cli

Configure build parameters

Add these build parameters to your site configuration.

hugo.yaml

build:  buildStats:    enable: true  cachebusters:  - source: assets/notwatching/hugo_stats\.json    target: css  - source: (postcss|tailwind)\.config\.js    target: cssmodule:  mounts:  - source: assets    target: assets  - disableWatch: true    source: hugo_stats.json    target: assets/notwatching/hugo_stats.json

Create CSS entry file

If you want Tailwind CSS to ignore your `hugo_stats.json`, list it in your `.gitignore` file.

assets/css/main.css

@import "tailwindcss";@source "hugo_stats.json";

Create partial template

Create a partial template to process the CSS with the Tailwind CSS CLI.

layouts/_partials/css.html

{{ with (templates.Defer (dict "key" "global")) }}  {{ with resources.Get "css/main.css" }}    {{ $opts := dict "minify" (not hugo.IsDevelopment) }}    {{ with . | css.TailwindCSS $opts }}      {{ if hugo.IsDevelopment }}        <link rel="stylesheet" href="{{ .RelPermalink }}">      {{ else }}        {{ with . | fingerprint }}          <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">        {{ end }}      {{ end }}    {{ end }}  {{ end }}{{ end }}

Start your build process

Start the preview of your site.

Terminal

hugo server -M

Start using Tailwind in your Hugo project

Add the partial template to the <head> of your base template and start using Tailwind’s utility classes to style the content of your templates and pages.

layouts/all.html

<!doctype html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    {{ partialCached "css.html" . }}  </head>  <body>    <h1 class="text-3xl font-bold underline">      Hello world!    </h1>  </body></html>