HugoブログをTailwind4にアップデートしました

Tailwind CSS v4.0がリリースされたので、HugoブログをTailwind4にアップデートしました。

そのままアップデートすると、エラーになってしまうので手順をまとめました。

設定

公式にもの手順はあるので、この通りにやっていきます。

npx @tailwindcss/upgrade

hugoではpostcss設定はpostcss.config.jsがデフォルトなので、postcss.config.mjsではなくpostcss.config.jsにします。

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

cssの設定

このブログのhugoのテーマは自作なのでthemeの中にassets/cssを作成ある、tailwind.cssを変更します。

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

+ @import "tailwindcss";

一行で済むようになったんですね。だいぶスッキリしました。

最初はこのようにmaincssから読み込むようにしてたんですけど、参照が404になったりプラグインが適用されなかったので一つ一つ読み込む方法に変えました。

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

上記のやり方だと上手くいきませんでした。

tailwind.cssを読み込む

cssを一つ一つ読み込むようにします。

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

@tailwindcss/typographyの適用方法

プラグインは以下のようにすれば適用されます。

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

ただ、hugo以外のNuxt.jsやviteなどのフレームワークでは、以下のように@pluginを使うとエラーになる人もいるようです。

hugoでもmain.cssから他のcssを読み込むようにしているときは、プラグインが適用されなかったので私の場合はもう素直に一つ一つ読み込むようにしました。

参考

@plugin

docs: update for Tailwind 4