HugoでTailwindCSSを利用しAMP Validなページを生成する

HugoでCSSフレームワーク「Tailwind CSS」を利用し、AMP Validなページを生成する方法についてのメモです。

ポイント

HugoでPostCSSの仕組みを利用して、TailwindでCSSを組み立てる
Tailwind CSS v1.4からpergeCSSを内包し、設定方法が変わった

Tailwind CSSは、utility-firstなCSSフレームワークです。あらかじめ決められたutilityのセットが用意されており、ユーザはそのutilityを組み合わせて任意のデザインを組み上げます。

一方、AMPの制約には、CSSのインライン化とCSSサイズが決められています。Tailwind CSSが用意するCSSをすべて利用した場合には、2413.4kBとなりAMPの制約を満たすことができません。そのため、HugoでTailwind CSSを利用してAMP Validなページを生成するためには、未使用CSSを削除し、サイズ圧縮が必要です。

Tailwind CSS ver.1.3までは@fullhuman/postcss-purgecssを利用していましたが、ver1.4からはTailwind自体にpurgeCSSを含むようになり、設定方法が変わりました。

head.html

Hugoの<head>を組み立てるテンプレート内で、postCSSを利用します。

{{ if .Site.IsServer }}
  {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") | fingerprint }}
  <link rel="stylesheet" href="{{ $style.Permalink }}" data> 
{{ else }}
  {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | minify }}
  <style amp-custom>{{ $style.Content | safeCSS }}</style>
{{ end }}

.Site.IsServerによって、ローカル開発と本番ビルドで挙動を変えています。

ローカル開発（huge server）：スタイルシートとして読み込み
本番ビルド（HUGO_ENV="production" NODE_ENV="production" hugo -gc）：AMPカスタムCSSとしてインラインCSS化

ポイントは次の記述です。css/styles.cssを読み取り、Hugo PipesのpostCSSに渡し、./assets/css/postcss.config.js"の設定に従い、CSSを処理します。

{{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | minify }}

postcss.config.js

const themeDir = __dirname + '/../../';

module.exports = {    
    plugins: [        
        require('postcss-import')({path: [themeDir]}), 
        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'), 
        require('autoprefixer'),
    ]
}

tailwind.config.js

tailwind.config.jsはTailwindの設定ファイルです。 purgeのmode: 'all'で未使用CSSを削除します。

 const themeDir = __dirname + '/../../';
 
 module.exports = {
   purge: {
     mode: 'all',
     content: [
       themeDir + 'layouts/**/*.html',
       'layouts/**/*.html',
       'content/**/*.html',
     ],
   },
   theme: {},
   variants: {},
   plugins: []
 }

参考

Tailwind v1.3系の際の設定は次のとおりでした。

const themeDir = __dirname + '/../../';

module.exports = {    
    plugins: [        
        require('postcss-import')({path: [themeDir]}), 
        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
        require('@fullhuman/postcss-purgecss')({
            // Specify the paths to all of the template files in your project 
            content: [
                themeDir + 'layouts/**/*.html',
                'layouts/**/*.html',
                'content/**/*.html',
            ],
            whitelist: ['blockquote'],
            whitelistPatternsChildren: [/post$/],
            // Include any special characters you're using in this regular expression
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], 
            fontFace: true
        }),    
        require('autoprefixer')({
            grid: true
        }),
        require('postcss-reporter'),
    ]
}

まとめ

Hugo Pipes「postCSS」を利用することで、Tailswind CSSでAMP Validなページを生成可能
Tailwind CSS ver1.4からフレームワーク自体にpurgeCSSの機能を含んだため、設定変更に注意

Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)

インプレスR&D

Amazon Kindle 楽天市場 Yahoo!ショッピング

ポイント

head.html

postcss.config.js

tailwind.config.js

参考

まとめ

Backlinks