Tailwind CSSとは? わかりやすく解説

Weblio 辞書 > 辞書・百科事典 > 百科事典 > Tailwind CSSの意味・解説 

Tailwind CSS

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2024/03/19 15:17 UTC 版)

Tailwind CSS
作者 Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger
開発元 Tailwind Labs[1]
最新版
3.4.1[2]  / 5 1月 2024
リポジトリ
プログラミング
言語
CSS
プラットフォーム Web
対応言語 English
ライセンス MIT License[3]
公式サイト tailwindcss.com
テンプレートを表示

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

たとえば、他のCSSフレームワークでは、黄色の背景色と太字のテキストを適用するmessage-warningというクラスが存在することがある。この結果をTailwind CSSで実現するためには、ライブラリが作成した一連のクラス、すなわちbg-yellow-300font-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)を使用して開発されており、パッケージマネージャーのnpmyarnを使用してインストールできる。[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はバージョン互換性を示すために、セマンティックバージョニング方式を使用している。

関連項目

脚注

  1. ^ Tailwind Labs”. GitHub. 2024年3月閲覧。
  2. ^ Release 3.4.1” (5 1月 2024). 19 1月 2024閲覧。
  3. ^ Github: tailwindlabs/tailwindcss, LICENSE”. GitHub. 2024年3月閲覧。
  4. ^ Gerchev, Ivaylo (2022). Tailwind CSS. Sebastopol: O'Reilly Media. ISBN 978-1-0981-4099-1. OCLC 1314257318. https://www.worldcat.org/oclc/1314257318 
  5. ^ Rappin, Noel (2021). Modern CSS with Tailwind flexible styling without the fuss. Raleigh. ISBN 978-1-68050-857-4. OCLC 1277046918. https://www.worldcat.org/oclc/1277046918 
  6. ^ tailwindlabs/tailwindcss, Tailwind Labs, (2022-12-05), https://github.com/tailwindlabs/tailwindcss 2022年12月5日閲覧。 
  7. ^ Utility-First - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
  8. ^ Responsive Design - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
  9. ^ Hover, Focus, & Other States - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
  10. ^ Dark Mode - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
  11. ^ Installation - Tailwind CSS” (英語). tailwindcss.com. 2021年11月13日閲覧。
  12. ^ a b Release v3.0.0-alpha.1 tailwindlabs/tailwindcss” (英語). GitHub. 2021年11月13日閲覧。

外部リンク




英和和英テキスト翻訳>> Weblio翻訳
英語⇒日本語日本語⇒英語
  
  •  Tailwind CSSのページへのリンク

辞書ショートカット

すべての辞書の索引

Tailwind CSSのお隣キーワード
検索ランキング

   

英語⇒日本語
日本語⇒英語
   



Tailwind CSSのページの著作権
Weblio 辞書 情報提供元は 参加元一覧 にて確認できます。

   
ウィキペディアウィキペディア
All text is available under the terms of the GNU Free Documentation License.
この記事は、ウィキペディアのTailwind CSS (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。

©2025 GRAS Group, Inc.RSS