Tailwind CSS

Tailwind CSS (Tailwindとも) とは、オープンソースのCSSフレームワークである。このライブラリの特徴は、Bootstrapなどの他のCSSフレームワークと異なり、ボタンやテーブルなどの要素に対する一連の定義済みクラスを提供しないことである。代わりに、"ユーティリティ"CSSクラスを提供するので、これを組み合わせて要素をスタイリングする。^[4][5]

Tailwind CSS

作者	Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger
開発元	Tailwind Labs[1]
最新版	4.1.11[2]  / 26 June 2025
リポジトリ	github.com/tailwindlabs/tailwindcss
プログラミング 言語	CSS
プラットフォーム	Web
対応言語	English
ライセンス	MIT License[3]
公式サイト	tailwindcss.com

たとえば、他のCSSフレームワークでは、黄色の背景色と太字のテキストを適用するmessage-warningというクラスが存在することがある。この結果をTailwind CSSで実現するためには、ライブラリが作成した一連のクラス、すなわちbg-yellow-300とfont-boldを適用する必要がある。

2023年7月30日時点、Tailwind CSSはGitHubで7万以上のスターを獲得している。^[6]

機能

ユーティリティクラス

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

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の主な用途は、さまざまな画面サイズに対するレスポンシブなインターフェースを設計することである^[8]。また、要素が持つことができる異なる状態、つまり、hover: (ホバー時)、focus: (キーボード選択時)、active: (使用中)^[9]、またはブラウザやオペレーティングシステムがダークモードを有効にしているときなどのVariantsも存在する。^[10]

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

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

設定とテーマ

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

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はバージョン互換性を示すために、セマンティックバージョニング方式を使用している。

関連項目

• jQuery Mobile
• Webアプリケーションフレームワーク
• JavaScriptライブラリ
• Bootstrap