🍃

「tailwindcss-jit」次世代のTailwind CSS 純正ツールで開発を高速化する

2021/03/18に公開

CSS

Nuxt

Tailwind CSS

tech

前回の投稿で WindiCSS を紹介しましたが、今回は新たに Tailwind から登場した純正ツール tailwindcss-jit を紹介します。

こちらは WindiCSS や他の Tailwind 互換ツール等に触発され、TailwindCSS の作者である Adam Wathan さんが開発したツールです。

✨ 機能

非常に速いビルド時間
全てのバリアントクラスの組合せが使用可能
コンフィグなしで任意のスタイルを生成
使用する CSS が開発と本番で同一
開発中のブラウザパフォーマンスの向上

非常に速いビルド時間

Tailwind は CLI を使用して最初にコンパイルするのに 3〜8 秒かかり、Webpack を使用したプロジェクトでは Webpack が大きな CSS ファイルに苦労するため、30〜45 秒以上かかる場合があります。このライブラリは使用しているビルドツールに関係なく、大きなプロジェクトでも約 800 ミリ秒（3 ミリ秒のインクリメンタルビルド）でコンパイルできます。

全てのバリアントクラスの組合せが使用可能

focus-visible, active, disabledなどのバリアントは通常ファイルサイズの考慮事項により、すべてのパターンを生成することは困難なのでデフォルトで有効になっていません。このライブラリはオンデマンドでスタイルを生成するため、いつでも好きなときに任意のバリアントを使用できます。sm:hover:active:disabled:opacity-75のように積み重ねることもできます。もうconfig ファイルでバリアントを制御する必要はありません。

コンフィグなしで任意のスタイルを生成

風変わりな背景画像に指定する top: -113px のように、デザインシステムの一部ではない特定の値が必要になったことはありませんか？スタイルはオンデマンドで生成されるため、top-[-113px]のように角括弧表記を使用して必要に応じてそのためのユーティリティを生成できます。また、md:top-[-113px]のようなバリアントがある場合でも機能します。

使用する CSS が開発と本番で同一

スタイルは必要に応じて生成されるため、未使用のスタイルを本番用に削除する必要はありません。つまり、すべての環境でまったく同じ CSS が表示されます。本番環境において重要なスタイルを誤って削除することを心配する必要は無くなります。

開発中のブラウザパフォーマンスの向上

開発ビルドは本番ビルドと同じように小さいので、ブラウザーは事前生成された数 MB の CSS を解析して管理する必要が無くなります。特に大きな config ファイルを持つプロジェクトでは、これにより開発ツールの応答性が大幅に向上します。

🎉 試してみる

nuxt/tailwind モジュールは tailwindcss-jit の公開当日に v4 をリリースし、早速対応しています！

今回はこちらを使用して実際に動かすところまでやっていきます。

Nuxt のプロジェクト作成

npm init nuxt-app <project-name>

Package Manager: NPM
Language: JavaScript
UI FrameWork: None

上記の設定で進めていきます。

Tailwind モジュールのインストール

npm install --save-dev @nuxtjs/tailwindcss

// nuxt.config.js
export default {
  // ...
  buildModules: ["@nuxtjs/tailwindcss"],
  tailwindcss: {
    jit: true,
  },
  // ...
}

<!-- index.vue -->
<template>
  <div class="p-10">
    <h1 class="text-2xl text-blue-500">Hello Tailwind</h1>
  </div>
</template>

動作確認

npm run dev

あとは適当に View を編集するだけです！
導入も簡単ですね。

💭 余談

公開に際して、情報を積極的に提供していた WindiCSS チームについて当初ツイートで一言も取り上げておらず、すれ違いが起きてしまったようです 😢。

個人的には WindiCSS を推していますが、オンデマンドコンパイルという機能が公式でも実現されたことは実に大きな一歩になったと思います。
この先も 健全な 競争を行い、両者共に成長していくといいなと希望を込めてこの記事の終わりとさせていただきます。

ここまで読んでいただきありがとうございました。