ジャストインタイム（JIT）モードを備えたマスターテールウィンドCSS

公開: 2022-04-23

ユーティリティファーストのフレームワークは、Webページの設計を高速化するのに役立ち、TailwindCSSは最も人気のあるものの1つになりました。 しかし、人気があるからといって完璧というわけではありません。

Tailwind CSSの使用には、開発中に巨大なスタイルシートを用意したり、独自に追加のバリアントを有効にしたりするなど、いくつかの課題がありました。 これらの課題のいくつかに対する解決策は、このチュートリアルの一般的な焦点になります。

このチュートリアルでは、ジャストインタイムコンパイラ（より一般的にはJITコンパイラと呼ばれる）として知られるTailwindCSSフレームワークの非常に重要な機能について説明します。

Tailwind CSS JITコンパイラを使用する機能と利点、それを有効にする方法、およびいくつかの実用的な例を紹介します。

始めましょう。


Tailwind CSS JIT（Just-in-Time）コンパイラとは何ですか？

ジャストインタイムコンパイラについて説明する前に、まずTailwindCSSについて説明する必要があります。

Tailwind CSSは、事前定義されたCSSクラスのセットを備えたユーティリティファーストのCSSフレームワークであり、マークアップに直接適用して、Webページのデザインを高速化し、事前定義されたシステムを使用してデザインの一貫性を維持できます。

JITコンパイラがリリースされる前は、インストール後に生成されるTailwindCSSファイルのサイズは通常最大3MBです。 ただし、Tailwindの構成とカスタマイズを続けると、ファイルサイズは大きくなり続けます。場合によっては、スタイルシートが15MBになることもあります。

未使用のスタイルはすべて本番環境で削除されますが、開発中はそうではありません。 10MBまたは20MBのスタイルシートでは、問題が発生し、開発ツールが遅れることになります。

JITコンパイラを使用すると、プロジェクトをビルドするときにスタイルが生成されます。 これは、Tailwind CSSに付属するすべてのユーティリティクラスではなく、現在使用しているユーティリティクラスのみがスタイルシートのサイズに含まれることを意味します。

TailwindCSSJITモードを使用する利点

このセクションでは、JITコンパイラを使用する利点のいくつかについて説明します。 それらが含まれます：

  1. あなたのスタイルシートは開発と生産で同じです。
  2. ビルド時間が短縮されます。
  3. デフォルトでは、すべてのバリアントが有効になっています。
  4. 開発中のコンパイルははるかに高速です。
  5. 使用済みのスタイルのみが生成されます。
  6. バリアントは積み重ねることができます。
  7. 開発ツールのパフォーマンスが向上しました。

TailwindCSSJITコンパイラを使用することの欠点

JITコンパイラのGitHubドキュメントによると、現在知られている制限は次のとおりです。

  • 高度なPurgeCSSオプションはサポートされていません。
  • 「コアの一部であるか、プラグインによって生成されるか、 @layerルール内で定義されているクラスのみを@applyできます。 @layerルール内で定義されていない任意のCSSクラスを@applyすることはできません。」
  • PostCSS8のみがサポートされています。

@applyディレクティブは、カスタムCSSでユーティリティクラスを適用するために使用されます。 これは、カスタムCSSスタイルを定義しているが、すでに定義されているユーティリティクラスを利用したい場合に便利です。 @applyディレクティブがどのように機能するかの例を次に示します。

 .my-custom-css { @apply text-green-500; }

上記のコードでは、カスタムCSSクラスに緑色を追加しました。 緑色は、Tailwindユーティリティクラスを使用して適用されました。

この役立つガイドで、ジャストインタイムコンパイラとして知られるTailwindCSSフレームワークの非常に重要な機能について学びます。 クリックしてツイート

TailwindCSSJITモードを有効にする方法

執筆時点で、Tailwind CSSバージョン3はすでにリリースされており、TailwindCSSをインストールするとデフォルトで有効になっていることに注意してください。 JITコンパイラを有効にするための以下の説明は、バージョン3以降には適用されません。 このチュートリアルで説明されている他のすべての例は、バージョン3と互換性があります。

JITコンパイラを有効にするのは非常に簡単です。 あなたがしなければならないのは、'jit'の値を持つべきモードプロパティを追加することによってtailwind.config.jsファイルを更新することです。

tailwind.config.jsは次のようになります。

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

焦点を当てる行は、追加した部分です。

 モード：'jit'

これにより、JITコンパイラの機能を使用できるようになります。

それが完了したら、ビルドコマンドを実行して、ファイルサイズが減少することを確認できます。 表示されるスタイルは、使用しているスタイルのみです。

ファイルサイズを小さくすると、開発中と制作中のスタイルシートは同じになります。 開発者ツールが遅れる可能性も最小限に抑えられ、プロジェクトをビルドするときにコードがより高速にコンパイルされます。

次に、JITコンパイラの実用的なアプリケーションをいくつか見ていきます。

これにより、JITコンパイラの機能を使用できるようになります。

それが完了したら、ビルドコマンドを実行して、ファイルサイズが減少することを確認できます。 表示されるスタイルは、使用しているスタイルのみです。

ファイルサイズを小さくすると、開発中と制作中のスタイルシートは同じになります。 開発者ツールが遅れる可能性も最小限に抑えられ、プロジェクトをビルドするときにコードがより高速にコンパイルされます。

次に、JITコンパイラの実用的なアプリケーションをいくつか見ていきます。

TailwindCSSJITコンパイラの使用方法

このセクションでは、JITコンパイラの実際的な例をいくつか紹介します。 Tailwindの設計システムを拡張するのに役立つ任意の値から始めます。

任意の値

すでに作成されている設計システムの外部の値を使用したい場合が発生する可能性があります。 これらの値は、色、パディング、マージン、幅などの値である可能性があります。

JITコンパイラーを使用すると、任意の値を使用してこれを実現できます。 これらの任意の値を使用すると、設計システムから抜け出し、独自のカスタム値を定義できます。これらの値は、[300px]、[＃FA8072]の構文で表示されます。

これを行うには、値を角かっこで囲んでネストし、Tailwindが設計システムで新しい値を定義していることを認識できるようにする必要があります。 以下に例を示します。

 <div class="mt-[300px] w-[500px]"> </div>

上記の例では、最初はデザインシステムに存在しなかった2つの新しい値（300pxと500px）を使用しました。 JITコンパイラーの前は、おそらく最初にconfig.jsファイルでこれらの値を定義して、これと同じ効果を実現する必要があります。

次の例は、新しい色の値を次のように定義する方法を示しています。

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

ここでは、鮭の背景色の段落を作成しました。 bg-salmonというTailwindユーティリティクラスは表示されませんが、任意の値を使用してこれを定義できます。

ダウンタイムとWordPressの問題に苦しんでいますか？ Kinstaはあなたの時間を節約するために設計されたホスティングソリューションです！ 私たちの機能をチェックしてください

積み重ね可能なバリアント

JITコンパイラでは、すべてのバリアントがデフォルトで有効になっているため、config.jsファイルを使用していずれかを有効にすることを忘れることができます。 これに加えて、バリアントを積み重ねて素晴らしい結果を得ることができます。

各バリアントはコロンで区切られます。

次に例を示します。

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

上記のコードは、focusプロパティが無効になっているボタンを作成し、ホバーすると青色に変わります。

疑似要素

JITコンパイラを使用すると、疑似要素のスタイルを設定できます。 疑似要素は、要素の最初の文字のスタイル設定や、要素の前後にコンテンツを挿入するなど、要素の特定の部分のスタイルを設定するために使用されます。

次にいくつかの例を示します。

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

上記の例では、最初の文字「M」は緑色になります。

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

上記のコードのテキストを強調表示すると、背景色が緑色になります。

サイドごとの境界線の色

ファイルサイズを考慮して、この機能は最初は省略されていましたが、JITコンパイラのリリースで変更されました。 各境界線に異なる色を付けることができます。

この例を見てみましょう：

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

divに複数の境界線の色を指定しました。上の境界線は赤、右の境界線は青、下の境界線は黄色、左の境界線は緑です。

TailwindCSSバージョン3のJITモード

Tailwind CSSバージョン3以降では、Tailwind CSSをインストールするときにJITコンパイラがデフォルトで有効になっているため、 tailwind.config.jsファイルの内容を変更する必要はありません。 これにより、外出先でJITコンパイラのすべての機能にアクセスできます。 現在のバージョンのインストール手順に従うだけで、実行できます。

JITコンパイラとは何ですか...そしてそれはどのようにあなたのサイトを強化することができますか？ このガイドには答えがありますクリックしてツイート

概要

JITコンパイラは、TailwindCSSフレームワークをまったく新しいレベルに引き上げました。 そのリリースには、フレームワークの使用を改善するための新しい便利な機能が付属しています。 実際に使用するスタイルのみが生成されるため、ファイルサイズが非常に大きくなり、開発ツールが遅れることを心配する必要がなくなりました。

バリエーションのスタック、疑似要素を使用した要素のスタイリング、任意の値を使用したデザインシステムの拡張、非常に要求の厳しい機能（要素の境界線の両側を個別にスタイル設定する機能）などの新機能の例をいくつか見てきました。 ここでは、TailwindのJIT機能の制限にまだ達していません。次のステップは、自分でテストし、JITの機能を自分の作業に最適に活用する方法を探ることです。

JITコンパイラを利用して構築したクールなものは何ですか？ 以下のコメントであなたの考えを共有してください。