テイルウィンドCSS

テイルウィンドCSS
原作者アダム・ワサン、ジョナサン・ライニンク、デビッド・ヘンプヒル、スティーブ・ショーガー
開発者テイルウィンドラボ[ 1 ]
初回リリース2019年5月13日[ 2 ] (2019-05-13)
安定版リリース
4.1.18 [ 3 ] ウィキデータで編集する / 2025年12月11日
書かれたTypeScript、Rust、CSS
プラットフォームウェブ
入手可能な英語
ライセンスMITライセンス[ 4 ]
Webサイトtailwindcss.com
リポジトリ

Tailwind CSSはオープンソースのCSSフレームワークです。Bootstrapなどの他のフレームワークとは異なり、ボタンやテーブルなどの要素に定義済みのクラス群を提供していません。代わりに、各要素に組み合わせてスタイルを適用できる「ユーティリティ」CSSクラスのリストを作成します。[ 5 ] [ 6 ]

例えば、従来のシステムでは、黄色の背景色と太字のテキストを適用するクラスが存在します。Tailwindでmessage-warningこの結果を実現するには、ライブラリによって作成された一連のクラスを適用する必要があります。 bg-yellow-300font-bold

2026年2月3日現在、Tailwind CSSはGitHubで93,300以上のスターを獲得しています。[ 7 ]

特徴

ユーティリティクラス

ユーティリティファーストのコンセプトは、Tailwindの主な特徴です。[ 8 ]コンポーネント（ボタン、パネル、メニュー、テキストボックスなど）ごとにクラスを作成するのではなく、特定のスタイル要素（黄色、太字フォント、非常に大きなテキスト、中央要素など）ごとにクラスを構築します。これらのクラスはそれぞれユーティリティクラスと呼ばれます。

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

例: 黄色の通知
結果 例：Tailwind の黄色の警告.png
コード 
< div class = "m-4 p-4 bg-yellow-200 font-bold rounded-lg" > < p >鳥に餌をあげるときは注意してください。</ p > </ div >
クラス 追い風 CSS相当
m-4margin:1rem;
p-4padding:1rem;
bg-yellow-200background-color:rgb(254240138);
font-boldfont-weight:700;
rounded-lgborder-radius:0.5rem;

変種

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。この設定ファイルでは、カラーパレットや要素間のマージンサイズなど、ユーティリティクラスの値を設定できます。

すべてを構築してパージ

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

この方法は、バリアントの数とその組み合わせによって生成されるクラスの数が多くなるため、消去されるまでの待機時間が長く、CSSファイルのサイズが大きくなるという欠点があります。この動作モードは、Tailwind CSSのバージョン3では利用できなくなりました。[ 13 ]

ジャストインタイムモード

JIT モード ( Just-In-Time ) は、CSS を生成する別の方法で、すべての可能なクラスを生成してから使用されていないクラスをすべて削除する (ツリー シェイキング テクニック) のではなく、HTML、JSX、VUE ファイル (または構成された拡張機能や場所) のコンテンツを解析し、必要なクラスのみを即座に生成して使用します。

JITは必要なCSSのみを生成することで、CSSファイルのサイズを削減します。この技術的改善により、多数の新しいバリアントやユーティリティクラスを導入できるようになり、設定で指定されていない角括弧表記（例： w-[137px]、bg-[#1da1f2]）を使用して任意の値を持つユーティリティクラスをオンザフライで作成することも可能になりました。

Tailwind CSSのバージョン3からはJITモードがデフォルトになりました。[ 13 ]

バージョン

Tailwind CSS は、セマンティック バージョニングを使用してバージョンの互換性を識別します。

参照

参考文献

  1. ^ 「Tailwind Labs」 . GitHub .
  2. ^ Doe. 「リリースノート: Tailwind CSS v1.0」 . Tailwind CSS . 2024年8月17日閲覧。
  3. ^ 「リリース 4.1.18」 . 2025年12月11日. 2025年12月13日閲覧。
  4. ^ 「 Github : tailwindlabs/tailwindcss、ライセンス」。GitHub 。
  5. ^ゲルチェフ、イヴァイロ (2022).追い風 CSS。セバストポル: オライリーメディア。ISBN 978-1-0981-4099-1. OCLC  1314257318 .
  6. ^ Rappin, Noel (2021).手間をかけずにTailwindで柔軟なスタイリングを実現するモダンなCSS . Raleigh: The Pragmatic Bookshelf. ISBN 978-1-68050-857-4. OCLC  1277046918 .
  7. ^ tailwindlabs/tailwindcss、Tailwind Labs、2026年2月3日、 2026年2月3日閲覧。
  8. ^ 「ユーティリティファースト - Tailwind CSS」 . tailwindcss.com . 2021年11月13日閲覧。
  9. ^ 「レスポンシブデザイン - Tailwind CSS」 . tailwindcss.com . 2021年11月13日閲覧。
  10. ^ 「ホバー、フォーカス、その他の状態 - Tailwind CSS」 . tailwindcss.com . 2021年11月13日閲覧。
  11. ^ 「ダークモード - Tailwind CSS」 . tailwindcss.com . 2021年11月13日閲覧。
  12. ^ 「インストール - Tailwind CSS」 . tailwindcss.com . 2021年11月13日閲覧。
  13. ^ a b “Release v3.0.0-alpha.1 tailwindlabs/tailwindcss” . GitHub . 2021年11月13日閲覧。
「 https://en.wikipedia.org/w/index.php?title=Tailwind_CSS&oldid=1336455951」から取得