Hugo に Tailwind CSS をインストールする

1. はじめに#

Hugo には，assets ディレクトリ下に配置している CSS ファイルやメディアファイルなどのアセットを処理する Hugo Pipes が標準で実装されており，PostCSS も操作することも出来ます。また，Tailwind CSS をインストールする方法として Tailwind CLI や CDN を活用した方法の他，PostCSS のプラグインとしてインストールする方法があります。本記事では，これらの機能と特徴を活用して Hugo に Tailwind CSS をインストールする手順について記述します。

本記事で行っている作業は，以下の環境下で実行したものです。また，npm と Hugo はインストール済みの前提で記述しており，インストール手順は割愛していることをご了承ください

npm Ver.6.14.11
Hugo Ver.0.80.0
Zorin OS 15 Core (Ubuntu 18.04 LTS)

2. 環境構築#

(1) まず初めに，Hugo のテンプレートを生成します。(2) 次に，必要なファイルである index.html と style.css，postcss.config.js を作成します。(3) 最後に，必要なパッケージである tailwindcss と postcss-cli，autoprefixer をインストールします。Tailwind CSS のインストールガイドでは，postcss をインストールしていますが，Hugo Pipes では postcss-cli が必要なため注意が必要です。

1
# (1)
2
$ hugo new site quickstart
3
$ cd quickstart
4

5
# (2)
6
$ mkdir assets
7
$ touch assets/style.css
8
$ touch layouts/index.html
9
$ touch postcss.config.js
10

11
# (3)
12
$ npm init -y
13
$ npm install tailwindcss@latest postcss-cli@latest autoprefixer@latest

Hugo Pipes のドキュメントと Tailwind CSS のインストールガイド，Tailwind UI の CTA Sections を参考に，上記で作成した index.html と style.css，postcss.config.js を以下のように書き換えます。

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <link rel="stylesheet" href="{{ (resources.Get "style.css" | resources.PostCSS | minify | fingerprint).Permalink }}">
6
  <meta charset="UTF-8">
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
  <title>Hugo + Tailwind CSS</title>
9
</head>
10

11
<body>
12
  <!-- This example requires Tailwind CSS v2.0+ -->
13
  <div class="bg-gray-50">
14
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
15
      <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
16
        <span class="block">Ready to dive in?</span>
17
        <span class="block text-indigo-600">Start your free trial today.</span>
18
      </h2>
19
      <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
20
        <div class="inline-flex rounded-md shadow">
21
          <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
22
            Get started
23
          </a>
24
        </div>
25
        <div class="ml-3 inline-flex rounded-md shadow">
26
          <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
27
            Learn more
28
          </a>
29
        </div>
30
      </div>
31
    </div>
32
  </div>
33
</body>
34

35
</html>

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

1
module.exports = {
2
  plugins: {
3
    tailwindcss: {},
4
    autoprefixer: {},
5
  },
6
}

3. 動作確認#

Hugo Serer を起動し，任意の Web ブラウザでアクセスします。以下のような画面が表示されれば正常にインストールが完了しています。また，Hugo Serer を起動する際に Tailwind CSS をビルドするため，バニラの状態と比較して Hugo Serer の起動に時間がかかります。

1
$ hugo server --gc --minify
2

3
                   | EN
4
-------------------+-----
5
  Pages            |  4
6
  Paginator pages  |  0
7
  Non-page files   |  0
8
  Static files     |  0
9
  Processed images |  0
10
  Aliases          |  0
11
  Sitemaps         |  1
12
  Cleaned          |  0
13

14
Built in X ms
15
Environment: "development"
16
Serving pages from memory
17
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
18
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
19
Press Ctrl+C to stop

実行結果

4. おわりに#

ここまで，Hugo に Tailwind CSS をインストールする手順について記述してきました。本記事は，開発環境を想定した内容になっています。本番環境にデプロイする場合は，PurgeCSS の設定と NODE_ENV を production に設定することを，お忘れなく。