フロントエンドの開発でフルスクラッチで開発するケースのcssフレームワークとしてtailwindcssをここ一年は使っています。tailwindcssには、jit mode=(Just -in-Time Mode)があります。いくつかのプロジェクトで導入してみた結果、tailwindcssをより使いこなせるなと思ったので、紹介します。
目次
公式マニュアル
以下が公式です。設定とかは以下に記載があるので見てください。
詳細は公式を見てもらうとして、JITモードではない tailwindcssを利用している人でよく利用しそうな内容を3つだけピックアップして紹介します。
任意の値でwidthやpaddingが設定できる
cssフレームワークを使っている多くの方は、自分自身でcssを書きたくないと思っている人が大半だと思います。ただよくある問題として、padding等の微調整でpx単位で指定するcssをインラインスタイルとして記載したり、専用のクラスセレクタを記載したりすると思いますが、正直、面倒だし可読性も下がるなって思っている人もいると思います。JITモードを有効にしたときには、下記のような記載方法ができます。
<div class="w-[762px]" ></div> <div class="w-[5px]" >yyyy</div>
JITモードの有効化は意外と簡単
JITモードの有効化はすごく簡単です。tailwind.config.jsに下記を追加するだけです。
mode: 'jit'
JITモードを有効にするとcssが軽くなる
tailwindcssを導入して困ることの一つに巨大なCSS(10万行程度)が出来上がるという問題があります。開発中もこの巨大なファイルを読みこむので時間がかかったり表示が遅くなるという問題がありました。JITモードでは、cssのビルド時に必要なcssのみにするので、不要なcssが削除されます。
まとめ
今回は、tailwindcssのJITモードを駆け足で紹介しました。まだ、正式版ではないですが、いくつかのプロジェクトで導入して、作業効率もあがりますので、少し早いですが導入してみるのもありだと思います。お疲れ様でした。