shou.com
JP / EN

HugoにTailwindCSSを適用する

Tue Jan 2, 2024
Tue Jan 2, 2024
Hugo

HugoにTailwindCSSを適用する方法といえばpostcssをpipeとして使用しているケースが多いですが、僕が調べた限りほとんどのケースで動作が正常に動きませんでした。なのでpostcssを使用せずにTailwindCSSをビルドするやり方でHugoに適用する方法でやってみました。

環境

  • Hugo v0.115.2+extended darwin/amd64 BuildDate=unknown
  • TailwindCSS 3.4.0

Hugoを新規作成

1

hugo new site hugotails

Hugoのテーマを作成

1

hugo new theme tailwind-theme

テーマを適用する

1
2
3
4
5

// hugo.toml
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "tailwind-theme"

TailwindCSSをインストール

rootディレクトリで以下のコマンドを実行します。

1
2

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.jsが作成されます。contentプロパティにHugoのテーマのパスを指定することで、不要なtailwindcssのコードを削除してくれます。 これにより、ビルド時のファイルサイズを小さくすることができます。

1
2
3
4
5
6
7
8
9

// tailwind.config.js
module.exports = {
  content: ["./themes/tailwind-theme/layouts/**/**.html"],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

TailwindCSSのディレクティブを追加

1
2
3
4

// input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind Cliコマンドでビルド

ここまでできたら、Tailwind Cliコマンドでビルドします。

1

npx tailwindcss -i ./themes/tailwind-theme/assets/css/input.css -o ./themes/tailwind-theme/assets/css/output.css

上記のコマンドを実行するとinput.cssの同じディレクトリにoutput.cssが作成されます。Tailwindで使用したクラスのみが出力されていることを確認してください。

Hugoのテンプレートを編集

先ほど作成したoutput.cssをHugoのテンプレートに読み込み、表示されるか確認します。

テーマのindex.htmlを編集します。

1
2
3
4

<!-- themes/tailwind-theme/layouts/index.html -->
{{ define "main" }}
  <h1 class="text-3xl font-bold underline">Hello world! ここが変更</h1>
{{ end }}

テーマのbaseof.htmlを編集します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- themes/tailwind-theme/layouts/_default/baseof.html -->
<!DOCTYPE html>
<html>
  {{- partial "head.html" . -}}
  <body class="bg-gray-800 text-gray-50">
    {{- partial "header.html" . -}}
    <div id="content">{{- block "main" . }}{{- end }}</div>
    {{- partial "footer.html" . -}}
  </body>
</html>

テーマのhead.htmlを編集し、output.cssを読み込みます。

1
2
3
4
5
6

<head>
  <!-- themes style -->
  {{ with resources.Get "css/output.css"}}
  <link rel="stylesheet" href="{{ .RelPermalink }}" />
  {{ end }}
</head>

サーバーを起動して、表示されているか確認します。

HugoにTailwindCSSを適用する

See Also