Tailwind CSS jit モード

Tailwind CSS には jit（Just in Time）モードというのがあり、その場でしか使用しないプロパティを記述する方法があるというのを知った。ちなみに Tailwind CSS v3 が 2021年の11月にリリースされて、v3 を使っている人はデフォルトで使えるようになっているっぽい。

https://tailwindcss.com/blog/tailwindcss-v3

僕の場合は Nuxt.js に Tailwind CSS のプラグインを組み込んで使用している都合上、まだ Tailwind CSS v3 を使えておらず v2 で、jit モードを ON にして使っている。jit モードを ON にすると何ができるかは以下の公式ドキュメントを見ると書いてある。結論、ON にしない理由がないくらいメッチャ便利。

https://v2.tailwindcss.com/docs/just-in-time-mode

設定方法は mode: 'jit' を追加するだけ。

JavaScript
// tailwind.config.js
  module.exports = {
   mode: 'jit',
    purge: [
      // ...
    ],
    theme: {
      // ...
    }
    // ...
  }

[] 表記を使うことで、rem の8の倍数単位ではうまく表しきれない top-[117px] 的なやつが表現可能になって、これが一番大きい。記述はこんな感じ。

JavaScript
<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

ON にした方が圧倒的に表現の幅が広がるので良い。（最初はこの機能を知らなくてコンフィグに色々足してしまっていた……過去の自分に教えてあげたい）

🐈

追記

色々調べてたら、素で入れれば v3 使える？というかそもそもモジュールは何を提供してくれてるんだ？分からないことが増えてしまった。