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 quickstart3$ cd quickstart4
5# (2)6$ mkdir assets7$ touch assets/style.css8$ touch layouts/index.html9$ touch postcss.config.js10
11# (3)12$ npm init -y13$ 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 started23 </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 more28 </a>29 </div>30 </div>31 </div>32 </div>33</body>34
35</html>
1@tailwind base;2@tailwind components;3@tailwind utilities;
1module.exports = {2 plugins: {3 tailwindcss: {},4 autoprefixer: {},5 },6}
3. 動作確認
Hugo Serer を起動し,任意の Web ブラウザでアクセスします。以下のような画面が表示されれば正常にインストールが完了しています。また,Hugo Serer を起動する際に Tailwind CSS をビルドするため,バニラの状態と比較して Hugo Serer の起動に時間がかかります。
1$ hugo server --gc --minify2
3 | EN4-------------------+-----5 Pages | 46 Paginator pages | 07 Non-page files | 08 Static files | 09 Processed images | 010 Aliases | 011 Sitemaps | 112 Cleaned | 013
14Built in X ms15Environment: "development"16Serving pages from memory17Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender18Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)19Press Ctrl+C to stop
4. おわりに
ここまで,Hugo に Tailwind CSS をインストールする手順について記述してきました。本記事は,開発環境を想定した内容になっています。本番環境にデプロイする場合は,PurgeCSS の設定と NODE_ENV を production に設定することを,お忘れなく。