Tailwind CSS

ユーティリティファーストの概念は、Tailwind の主な差別化機能を指します。^{[ 8 ]}コンポーネント (ボタン、パネル、メニュー、テキストボックスなど) を中心にクラスを作成する代わりに、特定のスタイル要素 (黄色、太字フォント、非常に大きなテキスト、中央要素など) を中心にクラスが構築されます。これらのクラスはそれぞれユーティリティクラスと呼ばれます。

Tailwind CSSには、色、境界線、表示タイプ（display）、フォント、フォントサイズ、レイアウト、影など、多数のCSSプロパティを制御できるユーティリティクラスが多数あります。

Tailwind では、メディアクエリを介して特定の状況でのみユーティリティ クラスを適用する機能が提供されており、これをバリアントと呼びます。バリアントの主な用途は、さまざまな画面サイズに対応したレスポンシブ インターフェイスを設計することです。 ^{[ 9 ]}また、要素が持つことができるさまざまな状態、たとえばhover:ホバー時、focus:キーボード選択時、active:使用中^{[ 10 ]}、またはブラウザやオペレーティングシステムでダーク モードが有効になっている場合^{[ 11 ]}などにもバリアントがあります。

バリアントは、満たすべき条件と、その条件が満たされた場合に適用されるクラスの 2 つの部分から構成されます。たとえば、バリアントは、画面サイズが に定義された値以上である場合にmd:bg-yellow-400クラスを適用します。bg-yellow-400md

Tailwind CSS はJavaScriptを使用して開発され、Node.jsを介して実行され、npmやyarnなどの環境パッケージマネージャーを使用してインストールされます。^{[ 12 ]}

Tailwindが提供するユーティリティクラスとバリアントは、通常 という名前の設定ファイルを使用して構成できますtailwind.config.js。この設定では、カラーパレットやマージンのための要素間のサイズなど、ユーティリティクラスの値を設定できます。