Just-In-Time: Tailwind CSS の次世代技術

アップデート: Tailwind CSS v2.1 以降、新しい Just-in-Time エンジンは Tailwind CSS 自体に組み込まれているため、@tailwindcss/jit パッケージはもう必要ありません。ドキュメントの詳細はこちらをご覧ください。

長年にわたり Tailwind CSS を改良してきた中で、私たちが対処しなければならなかった最も困難な制約の 1 つは、開発時の生成ファイルサイズでした。設定ファイルを十分にカスタマイズすると、生成される CSS は 10MB 以上に達する可能性があり、ビルドツールやブラウザ自体が快適に処理できる CSS の量には限りがあります。

そのため、追加のブレークポイントを増やしたり、disabled や focus-visible などの追加のバリアントを有効にしたりするなど、設定ファイルへのコストのかかる変更には常に注意が必要でした。

本日、これらの懸念事項を過去のものにする新しいプロジェクトを発表できることを非常に嬉しく思います。それが Tailwind CSS 用の Just-in-Time コンパイラー です。

@tailwindcss/jit は、テンプレートファイルを作成する際に、CSS 全体を事前に生成するのではなく、CSS をオンデマンドでコンパイルする新しい実験的なライブラリです。

これには多くの利点があります。

• 驚異的な高速ビルド時間。Tailwind は、CLI を使用した初期コンパイルに 3〜8 秒、webpack プロジェクトでは webpack が大きな CSS ファイルに苦労するため、30〜45 秒以上かかることがあります。このライブラリは、使用しているビルドツールに関係なく、最大のプロジェクトでも約 800 ミリ秒（増分再構築はわずか 3 ミリ秒）でコンパイルできます。
• すべてのバリアントがデフォルトで有効。focus-visible、active、disabled などのバリアントは、ファイルサイズを考慮して通常はデフォルトで有効になっていません。このライブラリはオンデマンドでスタイルを生成するため、いつでも好きなバリアントを使用できます。sm:hover:active:disabled:opacity-75 のようにスタックすることもできます。バリアントを再度設定する必要はありません。
• カスタム CSS を記述せずに任意のスタイルを生成。デザインシステムの一部ではない、top: -113px のような非常に特殊な値が、癖のある背景画像に必要な場合があったことはありませんか？スタイルはオンデマンドで生成されるため、top-[-113px] のように角括弧表記を使用して、必要に応じてこのユーティリティを生成できます。md:top-[-113px] のようにバリアントでも機能します。
• 開発環境と本番環境で CSS が同一。スタイルは必要なときに生成されるため、本番環境で未使用のスタイルをパージする必要はありません。つまり、すべての環境でまったく同じ CSS が表示されます。本番環境で重要なスタイルを誤ってパージすることを心配する必要はもうありません。
• 開発時のブラウザパフォーマンスの向上。開発ビルドは本番ビルドと同じくらい小さいため、ブラウザはメガバイト単位の事前生成された CSS を解析および管理する必要がありません。構成が大幅に拡張されたプロジェクトでは、これにより開発ツールがはるかに応答性が高くなります。

今すぐ @tailwindcss/jit をインストールして、PostCSS 設定に組み込むことでお試しください。

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

// postcss.config.js
module.exports = {
  plugins: {
    "@tailwindcss/jit": {},
    autoprefixer: {},
  },
};

当面は別のライブラリとして出荷しますが、すべての不具合を解消したら、構成オプションの背後にある tailwindcss にロールバックし、今年の後半に Tailwind CSS v3.0 でデフォルトにすることを目指しています。

GitHub でプロジェクトの詳細を確認し、インストールして、試して、曲げて、壊して、感想をお聞かせください！

試してみる準備はできましたか？ はじめましょう →