Tzz.Dev

Hugoにtailwindcssを導入してみました

この記事を読むのに必要な時間は約1分です。

    最近、人気のtailwindcssを勉強し始めたので、Hugoに導入する手順を記録します。

    1. 必要なパッケージをインストール

      yarn add -D tailwindcss @tailwindcss/typography postcss postcss-cli autoprefixer

    2. tailwindcss初期化

      1

      yarn run tailwindcss init -p

      tailwind.config.jsとpostcss.config.jsが生成されます

    3. tailwindcss.config.js修正

      1
2
3
4
5
6
7
8
9

      module.exports = {
    content: ['./layouts/**/*.html', './content/**/*.md'],
    theme: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/typography'),
    ],
}

    4. cssファイル準備

      assets/css/main.cssを作成、内容を下記にします。

      1
2
3

      @tailwind base;
@tailwind components;
@tailwind utilities;

    5. テンプレートのheadにcssを追加

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

      {{ $css := resources.Get "css/main.css" }}

{{ $css = $css | resources.PostCSS }}

{{ if hugo.IsProduction }}

{{ $css = $css | minify | fingerprint | resources.PostProcess }}

{{ end }}

<link href="{{ $css.RelPermalink }}" rel="stylesheet" />

    以上。