Tailwind CSS
Tailwind CSS (Tailwindとも) とは、オープンソースのCSSフレームワークである。このライブラリの特徴は、Bootstrapなどの他のCSSフレームワークと異なり、ボタンやテーブルなどの要素に対する一連の定義済みクラスを提供しないことである。代わりに、"ユーティリティ"CSSクラスを提供するので、これを組み合わせて要素をスタイリングする。[4][5] たとえば、他のCSSフレームワークでは、黄色の背景色と太字のテキストを適用する 2023年7月30日時点、Tailwind CSSはGitHubで7万以上のスターを獲得している。[6] 機能ユーティリティクラス「ユーティリティファースト」という概念は、Tailwindの主な特徴である。[7]コンポーネント (ボタン、パネル、メニュー、テキストボックスなど) を中心にクラスを作成するのではなく、特定のスタイル要素 (黄色、太字、非常に大きなテキスト、中央揃えなど) を中心にクラスが構築される。これらのクラスはユーティリティクラスと呼ばれる。 Tailwind CSSには、色 (color)、線 (border)、表示タイプ (display)、フォント (フォントサイズなど)、レイアウト、シャドウ (box-shadow) など、多数のCSSプロパティを制御できる多くのユーティリティクラスが存在する。
VariantsTailwindは、メディアクエリを通じて特定の状況だけでユーティリティクラスを適用する機能を提供し、これをVariantsと呼ぶ。Variantsの主な用途は、さまざまな画面サイズに対するレスポンシブなインターフェースを設計することである[8]。また、要素が持つことができる異なる状態、つまり、 Variantsには2つの要素が存在する。一つは満たすべき条件、もう一つはその条件が満たされた場合に適用されるクラスである。例えば、Variants Tailwind CSSはJavaScript (Node.js)を使用して開発されており、パッケージマネージャーのnpmやyarnを使用してインストールできる。[11] 設定とテーマ通常は、 Build all and purge (すべてビルド→パージ)Tailwindのデフォルト(だった)モードは、プロジェクト設定に基づいてすべてのCSSの組み合わせをシステムが生成するというものである。その後、PurgeCSSなどの別のユーティリティを使って、すべてのファイルが走査され、使用されていないクラスがビルド後のCSSファイルから削除される。 Variantsの数とその組み合わせによって生成されるクラスの数が多いため、この方法はパージする前の長い待ち時間とCSSファイルのサイズが巨大になるという欠点を持つ。このモードは、Tailwind CSSのバージョン3ではもはや利用することができない。[12] Just-in-time モードJITモード (Just-In-Time) は、全てのクラスを生成してから使用されていないものを全て削除するのではなく、HTMLファイルの内容 (または設定された拡張子や場所) を解析し、必要で使用されているクラスだけをすぐ生成するという、CSSをビルドするための代替方法である。 使用される可能性があるすべての変数が生成されなくなったため、結果として得られるCSSファイルの待ち時間とサイズが大幅に削減される[要出典]。この技術的な改善により、数多くの新しいVariantsとユーティリティクラスを導入するとともに、設定されていない任意の値でユーティリティクラスをすぐ作成する能力 (Arbitrary values) も得られた。 TailwindCSS バージョン3では、このJITモードがデフォルトとなった。[12] バージョンTailwind CSSはバージョン互換性を示すために、セマンティックバージョニング方式を使用している。 関連項目脚注
外部リンク |
|||||||||||||||||||||||||||||||||||||||
