Updated Hugo blog to Tailwind 4

Tailwind CSS v4.0 was released, so I updated my Hugo blog to Tailwind 4.

If you just update as-is, you’ll get errors, so here are the steps I followed.

Setup

There’s an official guide, so just follow it:

npx @tailwindcss/upgrade

For hugo, the default postcss config is postcss.config.js, so use that instead of postcss.config.mjs.

// postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

CSS settings

Since my blog’s hugo theme is custom, I created assets/css in the theme and changed tailwind.css.

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

+ @import "tailwindcss";

Now it can be done in a single line. Much cleaner.

At first, I tried to load it from maincss like this, but it didn’t work because of 404 errors and plugins not being applied, so I changed to loading them one by one.

@import url(syntax.css);
@import url(tailwind.css);

However, this method didn’t work for me.

Loading tailwind.css

I will load the CSS files one by one.

<!-- syntax style -->
{{ with resources.Get "css/syntax.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
<!-- tailwind -->
{{ with resources.Get "css/tailwind.css" | postCSS (dict "config" "postcss.config.js") }}
<link rel="stylesheet" href="{{ .Permalink }}" />
{{ end }}

Applying @tailwindcss/typography

To apply the plugin, just do the following:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

However, it seems that in other frameworks like Nuxt.js and Vite, using @plugin like this can cause errors.

In my case, when I was trying to load other CSS files from main.css in hugo, the plugin didn’t get applied, so I ended up loading them one by one.

References

@plugin

docs: update for Tailwind 4