Hugoにtailwindcssを導入する

2021年06月13日

Hugo tailwindcss

Hugoにtailwindcssを導入する手順を記載しています。

Hugo とは

The world’s fastest framework for building websites https://gohugo.io/

ページ数が多くても高速で動作する静的サイトジェネレータです。 Go 言語で書かれています。データベースの状態を持たず Git のリポジトリだけで完結するので使いやすいです。

Netlify CMS を利用すれば Web から記事を書くこともできます。

tailwindcss とは

A utility-first CSS framework for rapidly building custom user interfaces. https://tailwindcss.com/

個人的には、プリミティブなクラスを利用してデザインを構築する CSS フレームワークというイメージです。

CSS は一切書かないでもいい感じの Web サイトが作れます。

なぜ Hugo に tailwindcss を導入するのか

tailwindcss typography などの便利なプラグインは CDN からは利用できず、インストールする必要があるため。

導入方法

postcss のフローに tailwindcss の導入処理を書きます。 https://gohugo.io/hugo-pipes/postcss/

$ pwd
/your/project/root/
$ npm install autoprefixer tailwindcss postcss-cli postcss-import

下記３ファイルを作成します。

// /<root>/themes/<theme>/assets/css/postcss.config.js
const themeDir = __dirname + "/../../";

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./hugo_stats.json"],
  defaultExtractor: (content) => {
    let els = JSON.parse(content).htmlElements;
    return els.tags.concat(els.classes, els.ids);
  },
});

module.exports = {
  plugins: [
    require("postcss-import")({
      path: [themeDir],
    }),
    require("tailwindcss")(themeDir + "assets/css/tailwind.config.js"),
    require("autoprefixer")({
      path: [themeDir],
      grid: true,
    }),
    ...(process.env.HUGO_ENV === "production" ? [purgecss] : []),
  ],
};

// /<root>/themes/<theme>/assets/css/tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

/* /<root>/themes/<theme>/assets/css/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

head タグに main.css を指定します。

~~ {{ $css := resources.Get "css/main.css" }} {{ $css = $css | resources.PostCSS
(dict "config" "./assets/css/postcss.config.js") }} {{ if hugo.IsProduction }}
{{ $css := $css | minify | fingerprint | resources.PostProcess }} {{ end }}
<link href="{{ $css.RelPermalink }}" rel="stylesheet" />
~~

以上で Hugo に tailwindcss を導入することが出来ます。