tailwindcssのJITモードを導入する。

今日はtailwindcssのJITモードを実際にnext.jsのプロジェクトに導入してみて、どんなものなのかをまとめていけたらと思います。

Next.jsのプロジェクトを作成する

とりあえずNext.jsのプロジェクトを作成してみます。

npx create-next-app test-app

ディレクトリを移動します

cd test-app

ローカルサーバーを起動します

npm run dev

いい感じに起動しました！

tailwind.cssのプロジェクトを作成する

次はtailwindcssをインストールします。

npm install  tailwindcss@latest postcss@latest autoprefixer@latest

いい感じに入りました。


次はtailwindcssの設定ファイルを作成します。

npx tailwindcss init -p

これによりプロジェクト直下にtailwind.config.jsとpostcss.config.jsが作成されました。

tailwind.config.jsに以下の設定を記述していきます。

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

purgeの設定をしました。

そもそもtailwindcssはたくさんのCSSのクラスが書かれているパッケージです。デフォルトでは以下のようにその全てのクラス名がプロジェクトに含まれています。
「tailwind.css」というファイルには18万行ものクラスが書かれてありました。


しかし本番環境ではこれらのクラスのうち、使っていないクラスというのは必要ありません。
なので本番環境に含まれていない、つまりは使用されていないクラスをプロジェクトから除外する必要があります。

そのための設定がtailwind.config.jsに書いてあるpergeです。

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

これはどういう設定になるのかというと、./pages//.{js,ts,jsx,tsx}と./components//.{js,ts,jsx,tsx}で使用しているTailwindCSSのクラスのみを残してそれ以外のtailwindcssのクラスを削除するという意味になります。
次にtailwindcssで生成されたCSSを読み込むために、styles/global.cssに以下を記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

global.cssは_app.tsxで読み込まれているものなので、プロジェクト内の全てのコンポーネントでtailwindcssに用意されていくクラスを使用できるということになります。

一応動作確認もしてみましたがいい感じです。

JITモードを導入する

それでは実際にtailwindcssのJITモードを実装していきたいと思います。
びびるほど簡単です。

tailwind.config.jsにmode:"jit"を記入するだけです。

module.exports = {
  //以下を追記
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

これでJITモードが使えるようになりました。

ここで再度「npm run dev」でローカルサーバーを立ち上げると以下のような警告が表示されます

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time. 

和訳してみると以下のようなことが書かれているとわかりました。

warn - 現在プレビュー版であるJITエンジンが有効になっています。
warn - プレビュー機能は、semverでカバーされておらず、破壊的な変更をもたらす可能性があり、いつでも変更される可能性があります。

プレビュー版とは、主にソフトウェアにおいて、正式リリース前の開発中の段階で試験的に公開・配布されるバージョンのことである。 プレビュー版はユーザーに試用してもらうことで新たな知見やフィードバックを得るといった目的で実施される。

試験的にリリースしてるよ〜みたいな感じっぽいです。

JITモードとは？

JITとは「Just In Time」の略でメリットとしては以下のようになります。

• ビルド時間を大幅に短縮
• 色々なバリアント(擬似クラス)が使える
• 使用したクラスのみを新たに生成するため、柔軟性がある
• 開発中のブラウザのパフォーマンスが上がる

なんか色々いい感じっぽいです。

JITモードって何ができるん？

ここですよねやっぱ。JITモードって何ができるのって話ですよね。

1.variantを組み合わせて使用することができる

variantというのは擬似クラスのことです。:hoverとか、:acriveとかああいう感じのやつです。
tailwindcssのJITモードではこのvariantを組み合わせて使用することができます。

具体的にはこんな感じです。

<div class="text-blue-500 md:hover:text-red-500">こんにちは</div>

この場合は、画面幅がmd以上(768px)かつ要素がhoverされた場合にtext-colorがredになるということです。
variantを組み合わせることによってより柔軟にcssを適用することができます。

2.独自の値を当てはめることができる

JITモードでは、プロパティの値部分を[]で囲むことによって、px指定やcalc指定、カラーコード指定ができるようになります。

具体的には以下のような感じです。

<div class="text-[200px]">テストテキスト</div>
<div class="text-[calc(200px-100px)]">テストテキスト</div>
<div class="text-red-[#ff0000]"></div>

なぜこれらが今まで実現できなかったのか？

なぜこれが今まで実現できなかったのかというと、擬似クラスや独自の値の組み合わせのパターンがあまりにも多過ぎたからです。
px指定だけで考えても数え切れないほどあります。それらの組み合わせを全て用意しておくとなるとファイルサイズが大きくなり過ぎて何かしら支障が出ます。
JITモードによって使用されたクラスのみを生成するシステムが生まれたことにより、擬似クラスの組み合わせや独自の値の指定ができるようになりました。

はい、今日はこんな感じでtailwindcssのJITモードを実際にNext.jsのプロジェクトに導入してみました。
とても便利なモードなのでこれからtailwindcssを使うときは絶対に有効化したいと思います。
最後までごらんいただきありがとうございました！