Tailwind CSS
Tailwind CSS (Tailwindとも) とは、オープンソースのCSSフレームワークである。このライブラリの特徴は、Bootstrapなどの他のCSSフレームワークと異なり、ボタンやテーブルなどの要素に対する一連の定義済みクラスを提供しないことである。代わりに、"ユーティリティ"CSSクラスを提供するので、これを組み合わせて要素をスタイリングする。 たとえば、他のCSSフレームワークでは、黄色の背景色と太字のテキストを適用するmessage-warningというクラスが存在することがある。この結果をTailwind CSSで実現するためには、ライブラリが作成した一連のクラス、すなわちbg-yellow-300とfont-boldを適用する必要がある。 2023年7月30日時点、Tailwind CSSはGitHubで7万以上のスターを獲得している。
  Tailwind CSS の公式ロゴマーク。 | |||
| 作者 | Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger | ||
|---|---|---|---|
| 開発元 | Tailwind Labs[1] | ||
| 最新評価版 |
| ||
| リポジトリ | |||
| プログラミング 言語 | CSS | ||
| 対応言語 | 英語のみ（？）日本語対応しているかは分かりません。 | ||
| ライセンス | MITライセンス | ||
| 公式サイト |
tailwindcss.com | ||
Tailwind CSS (Tailwindとも) とは、オープンソースのCSSフレームワークである。このライブラリの特徴は、Bootstrapなどの他のCSSフレームワークと異なり、ボタンやテーブルなどの要素に対する一連の定義済みクラスを提供しないことである。代わりに、"ユーティリティ"CSSクラスを提供するので、これを組み合わせて要素をスタイリングする。[3][4]
たとえば、他のCSSフレームワークでは、黄色の背景色と太字のテキストを適用するmessage-warningというクラスが存在することがある。この結果をTailwind CSSで実現するためには、ライブラリが作成した一連のクラス、すなわちbg-yellow-300とfont-boldを適用する必要がある。
2023年7月30日時点、Tailwind CSSはGitHubで7万以上のスターを獲得している。[5]
機能
[編集]ユーティリティクラス
[編集]「ユーティリティファースト」という概念は、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;
| |
Variants
[編集]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を設定することが可能である。設定では、カラーパレットやマージンの要素間のサイズなど、ユーティリティクラスの値を設定することができる。
Build all and purge (すべてビルド→パージ)
[編集]Tailwindのデフォルト(だった)モードは、プロジェクト設定に基づいてすべてのCSSの組み合わせをシステムが生成するというものである。その後、PurgeCSSなどの別のユーティリティを使って、すべてのファイルが走査され、使用されていないクラスがビルド後のCSSファイルから削除される。
Variantsの数とその組み合わせによって生成されるクラスの数が多いため、この方法はパージする前の長い待ち時間とCSSファイルのサイズが巨大になるという欠点を持つ。このモードは、Tailwind CSSのバージョン3ではもはや利用することができない。[11]
Just-in-time モード
[編集]JITモード (Just-In-Time) は、全てのクラスを生成してから使用されていないものを全て削除するのではなく、HTMLファイルの内容 (または設定された拡張子や場所) を解析し、必要で使用されているクラスだけをすぐ生成するという、CSSをビルドするための代替方法である。
使用される可能性があるすべての変数が生成されなくなったため、結果として得られるCSSファイルの待ち時間とサイズが大幅に削減される[要出典]。この技術的な改善により、数多くの新しいVariantsとユーティリティクラスを導入するとともに、設定されていない任意の値でユーティリティクラスをすぐ作成する能力 (Arbitrary values) も得られた。
TailwindCSS バージョン3では、このJITモードがデフォルトとなった。[11]
バージョン
[編集]Tailwind CSSはバージョン互換性を示すために、セマンティックバージョニング方式を使用している。
関連項目
[編集]
脚注
[編集]- ^ “Tailwind Labs”. GitHub. 2025年10月27日閲覧。
- ^ “Release 4.2.2” (2026年3月18日). 2026年4月7日閲覧。
- ^ Gerchev, Ivaylo (2022). Tailwind CSS. Sebastopol: O'Reilly Media. ISBN 978-1-0981-4099-1. OCLC 1314257318
- ^ Rappin, Noel (2021). Modern CSS with Tailwind flexible styling without the fuss. Raleigh. ISBN 978-1-68050-857-4. OCLC 1277046918
- ^ tailwindlabs/tailwindcss, Tailwind Labs, (2022-12-05) 2022年12月5日閲覧。
- ^ “Utility-First - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
- ^ “Responsive Design - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
- ^ “Hover, Focus, & Other States - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
- ^ “Dark Mode - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
- ^ “Installation - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
- ^ a b “Release v3.0.0-alpha.1 tailwindlabs/tailwindcss” (英語). GitHub. 2021年11月13日閲覧。