🔖

tailwindcssのjitモード覚書

2021/06/30に公開

tailwindcssにはJust-in-Time Modeがあります。

WindiCSSっぽいものを本家も作ってきた、みたいな感じなんですかね。その辺りの細かいあれこれは自分はわかりませんが。

とあえず以下が公式です。設定とかは以下を見ていただければと。

全ての記法を使えているわけではないのですが、とりあえず使ってみて便利だったものをメモっておこうと思います。ただ、公式に全部のっています。

任意の値を設定

<div class="w-[762px]">

tailwindcssでは、既存のspacingがあってw-1とかみたいに設定するのですが、それだとたりないのよね、という状況は結構起きます。

jitだと[762px]のように特定の値で設定できます。

<div className="lg:w-[calc(100%-330px)] pb-10 lg:pb-30">

こんな感じでcalcも書けます。

<div className="text-[#926a6a]">

カラー指定も楽です。

カラーについては透明度を以下のように書くこともできます。

 <div class="bg-red-500 bg-opacity-25">
 <div class="bg-red-500/25">

通常のtailwindcssだとbeforeとかないんですけど、jitだと使えます。

::before、::after、::first-letter、::first-line、::marker、::selectionと公式にはありますね。

<li className="before:content-['›'] before:mx-2">

これがかなり便利でして、わざわざscssとかの別ファイルにbeforeだけ外書きしてクラス名つけて…、なんてことをしなくて済むようになりました。

あと、上の例でもありますがcontent要素もそのまま指定できます。

jitの注意点ですが、まだプレビュー機能なので安定しないことですかね。

たまにですが追加したcssが反映されなくて困る時があります。

その時は、tailwind.config.jsのmode: 'jit',を一回消して保存して、再度戻して保存すると、モードが再起動？するようで読み込んでくれます。自分の環境だけかもですが。

もしかしたら自分がtailwindcssの書き方を間違えていて、上手く動いていない部分があるのかもです。

jitモードの公式部分の最後のほうに色々動作について書いてあるので、その辺りをちゃんと読めば何かわかるかもです。