Hugo + Tailwind CSS v4による独自テーマの作成とHugo Themesギャラリーへの登録
PaperModテーマを使っていたHugoブログを、Tailwind CSS v4ベースの独自テーマに移行し、Hugo公式テーマギャラリーに登録しました。その過程で遭遇した問題と対処を記録します。 Hugo + Tailwind CSS v4の統合 Hugo 0.157以降ではcss.TailwindCSSパイプラインがサポートされています。Tailwind v4は@import "tailwindcss"ベースの構文に変わっており、tailwind.config.jsは不要です。 /* assets/css/main.css */ @import "tailwindcss"; @theme { --color-primary: #2563eb; --font-sans: "Inter", sans-serif; } @variant dark (&:where(.dark, .dark *)); テンプレート側ではcss.TailwindCSSを呼び出します。 {{ with resources.Get "css/main.css" | css.TailwindCSS }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ end }} ビルド時に注意が必要な点として、@tailwindcss/cliへのパスが通っている必要があります。Cloudflare Pagesなどのデプロイ環境では以下のようにPATHを設定します。 # hugo.yaml (build settings for Cloudflare Pages) build: command: "PATH=$PWD/node_modules/.bin:$PATH hugo --minify && npx pagefind --site public" PaperModからの移行方法 テーマの切り替えはhugo.yamlのtheme:を変更するだけで済むため、独自テーマを開発しながらいつでもPaperModに戻せます。 # hugo.yaml theme: hugo-theme-flavor # PaperModに戻す場合は "PaperMod" に変更 移行作業は主に、layouts/ディレクトリのオーバーライドファイルをテーマ内に統合する作業でした。PaperModの構造に依存していた箇所（パーシャルの呼び出しやCSS変数名）を独自テーマの構造に合わせて書き換えています。 スタッキングコンテキストの問題 position: stickyを指定したヘッダー内にposition: fixedのモバイルメニューを配置したところ、z-indexを大きな値に設定してもメニューが他の要素の背面に表示される現象が発生しました。 ...
