Tailwind CSS

「ユーティリティファースト」という概念は、Tailwindの主な特徴である。^[6]コンポーネント (ボタン、パネル、メニュー、テキストボックスなど) を中心にクラスを作成するのではなく、特定のスタイル要素 (黄色、太字、非常に大きなテキスト、中央揃えなど) を中心にクラスが構築される。これらのクラスはユーティリティクラスと呼ばれる。

Tailwind CSSには、色 (color)、線 (border)、表示タイプ (display)、フォント (フォントサイズなど)、レイアウト、シャドウ (box-shadow) など、多数のCSSプロパティを制御できる多くのユーティリティクラスが存在する。

例: 黄色の通知

結果
コード	<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg"> <p>Please be careful when feeding the birds.</p> </div>
クラス	Tailwind	相当するCSS
	m-4	margin: 1rem;
	p-4	padding: 1rem;
	bg-yellow-200	background-color: rgba(254, 240, 138, 1);
	font-bold	font-weight: 700;
	rounded-lg	border-radius: 0.5rem;

Tailwindは、メディアクエリを通じて特定の状況だけでユーティリティクラスを適用する機能を提供し、これをVariantsと呼ぶ。Variantsの主な用途は、さまざまな画面サイズに対するレスポンシブなインターフェースを設計することである^[7]。また、要素が持つことができる異なる状態、つまり、hover: (ホバー時)、focus: (キーボード選択時)、active: (使用中)^[8]、またはブラウザやオペレーティングシステムがダークモードを有効にしているときなどのVariantsも存在する。^[9]

Variantsには2つの要素が存在する。一つは満たすべき条件、もう一つはその条件が満たされた場合に適用されるクラスである。例えば、Variants md:bg-yellow-400 は、画面サイズがmdで定義された値より大きい場合に、クラスbg-yellow-400を適用する。

Tailwind CSSはJavaScript (Node.js)を使用して開発されており、パッケージマネージャーのnpmやyarnを使用してインストールできる。^[10]

通常は、tailwind.config.jsという名前の設定ファイルを通じて、Tailwindが提供するユーティリティクラスとVariantsを設定することが可能である。設定では、カラーパレットやマージンの要素間のサイズなど、ユーティリティクラスの値を設定することができる。

Tailwindのデフォルト(だった)モードは、プロジェクト設定に基づいてすべてのCSSの組み合わせをシステムが生成するというものである。その後、PurgeCSSなどの別のユーティリティを使って、すべてのファイルが走査され、使用されていないクラスがビルド後のCSSファイルから削除される。

Variantsの数とその組み合わせによって生成されるクラスの数が多いため、この方法はパージする前の長い待ち時間とCSSファイルのサイズが巨大になるという欠点を持つ。このモードは、Tailwind CSSのバージョン3ではもはや利用することができない。^[11]

JITモード (Just-In-Time) は、全てのクラスを生成してから使用されていないものを全て削除するのではなく、HTMLファイルの内容 (または設定された拡張子や場所) を解析し、必要で使用されているクラスだけをすぐ生成するという、CSSをビルドするための代替方法である。

使用される可能性があるすべての変数が生成されなくなったため、結果として得られるCSSファイルの待ち時間とサイズが大幅に削減される^[要出典]。この技術的な改善により、数多くの新しいVariantsとユーティリティクラスを導入するとともに、設定されていない任意の値でユーティリティクラスをすぐ作成する能力 (Arbitrary values) も得られた。

TailwindCSS バージョン3では、このJITモードがデフォルトとなった。^[11]

Tailwind CSSはバージョン互換性を示すために、セマンティックバージョニング方式を使用している。