Twailwindcss2までは
purge.cssを使います。通常、tailwindcssは71kbほどの容量なのですが、さらに不要なcssを削除してくれるツールでパフォーマンスが良くなります。（ちなみに、bootstrapとかではまだこの技術は導入されていないようです。）
削除後の容量
通常利用であれば、10kb程度になります。
Tailwind3以降で導入されたJITとは？
tailwind.config.jsの中のcontentに指定したものに関しては、実際に使われたCSSだけが使われるようになります。（tailwindcss2までのpurgeと同じ効果ですね。）
JITのメリット
ビルドが早い
ビルドが早いのに本番同様の軽量なCSSを使って開発を続けられるという良いところどりです。開発中も何万行もあるような巨大なファイルをいちいち読み込んでいたら明らかに読み込みパフォーマンスは落ちてしまいますからね。
バリアントを組み合わせて使うことができるようになる。
例えば、以下のように「md」と「hover」を組み合わせて使うこともできるようになります。
|
1 |
md:hover:font-bold |
なぜ通常の設定ではできなかったというと組み合わせが無限大になってしまうので、行数が大きくなりすぎるため。ただ、JITであれば必要な部分だけ生成するのでこういうのが可能になったのです。
柔軟性が高い
例えば以下のような記述ができます。
|
1 |
top-[113px] |
パフォーマンスが上がる。
本番ビルド時は以下のように指定していましたが、JITを使うことによって「NODE_ENV=production」の部分がなくてもpurgeしてくれるようです。（ただ、tailwind CSS3以降はpurge自体がなくなりcontentになったので関係ないかもしれません。）
|
1 |
"build": "NODE_ENV=production postcss style.css -o dist.css" |
設定
tailwind.config.js
非常に簡単です。以下の設定を追加するだけでJITを適用できます。
|
1 2 3 |
module.exports = { mode: "jit", } |
package.json
開発時のビルドコマンドを以下のようにします。そうすることで適宜書き換えるたびに新しいCSSプロパティが追加されたら取ってきてくれます。
|
1 |
"dev": "TAILWIND_MODE=watch postcss style.css -o dist.css -w", |
この記事へのコメントはありません。