0
Help us understand the problem. What are the problem?

posted at

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にしたいからです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?