Setting up Hugo with TailwindCSS v4

Hugo’s native TailwindCSS v4 integration through css.TailwindCSS eliminates the need for external build tools. Here’s how to set it up properly.

Why this stack?

#

Hugo handles Markdown content and templating. TailwindCSS handles styling. Together, they produce a fast static site with minimal tooling overhead.

The key insight: Hugo v0.128+ includes native TailwindCSS v4 support via css.TailwindCSS. No PostCSS config, no separate build step, no Webpack.

The setup

#

1. Enable build stats

#

In your hugo.toml, enable buildStats so TailwindCSS knows which classes are used:

[build]
  [build.buildStats]
    enable = true

2. Create your CSS entry point

#

In assets/css/main.css:

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

3. Process in templates

#

Use Hugo Pipes to process, minify, and fingerprint:

{{ with resources.Get "css/main.css" | css.TailwindCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

Production optimizations

#

In production, add fingerprinting for cache busting and SRI for security. The result: a single CSS file with only the classes you actually use, fingerprinted for immutable caching.