tailwindcssのPurgeをいろんなテンプレートで使う

公式のページには

• .html
• .vue
• .jsx

の例しか載ってないが、他のPHP、Ruby、Python、PerlなどのWebフレームワーク等で使われているテンプレートエンジンのテンプレートファイルでも使えるっぽい。

PerlのMojoliciousならできた。

tailwind.config.js で.html.epのファイルを指定。

module.exports = {
  purge: ['templates/**/*.html.ep'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

ビルドする。

$ NODE_ENV=production npx tailwindcss build -i assets/css/style.css -o templates/css/tailwind.css.ep

でかくない。ちゃんとそれなりのファイルサイズになってる。

$ ls -lha templates/css/tailwind.css.ep                                                      
-rw-r--r--  1 yusuke  staff    13K  9 14 10:03 templates/css/tailwind.css.ep

で、html.html.epを編集して、

    <main class="md:container md:mx-auto py-4 mt-4 mb-10">

なんかこういうのを足してから、またビルドすると、cssのファイル容量が増えて、CSSが適応されている。

MacBook@yusuke $ ls -lha templates/css/tailwind.css.ep                                                      
-rw-r--r--  1 yusuke  staff    14K  9 14 10:23 templates/css/tailwind.css.ep

これなら、他のPHPのTwig（？）とか、他のテンプレートエンジンでも使えそう。それとtailwindcssのこの機能はPurgeCSSなんで、PurgeCSS単体でもいける。

ちなみに、なんで、CSSをテンプレートっぽいファイル名（tailwind.css.ep）にしているかというと、HTMLのテンプレート内でincludeで呼んでHTMLに展開してAMP Validにしたいからです。