XENEXE

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


heroImage

1. はじめに

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

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

2. 環境構築

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

Terminal window
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.htmlstyle.csspostcss.config.js を以下のように書き換えます。

index.html
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>
style.css
1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
postcss.config.js
1
module.exports = {
2
plugins: {
3
tailwindcss: {},
4
autoprefixer: {},
5
},
6
}

3. 動作確認

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

Terminal window
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_ENVproduction に設定することを,お忘れなく。