Tailwind CSSは2017年、Adam Wathan が個人で開発して公開したCSSフレームワークです。BootstrapのようなコンポーネントベースではなくUtility-Firstを掲げ、「p-4 bg-blue-500 rounded-lg のような小さなクラスを組み合わせてUIを作る」発想で世界中の開発者を魅了しました。現在はTailwind Labsが商用版（Tailwind UI）と並行運営し、Next.js等のメタフレームワークでデフォルト推奨されるほどの存在に。
この記事の目次
- Utility-First とは何か
- Tailwindの設定とカスタマイズ
- BootstrapなどのCSSフレームワークと比較
- Tailwindのエコシステム
- まとめ
Utility-First とは何か
従来のCSSは .card .btn-primary のようにコンポーネント単位でクラスを設計するのが定番でした。Tailwindはこれをひっくり返し、p-4 m-2 bg-blue-500 text-white rounded-lg のように「小さなユーティリティを組み合わせる」スタイルを推奨します。
HTMLが冗長に見える反面、「CSSを書かない／別ファイルを行き来しない」「クラス名のネーミングで悩まない」「予期せぬスタイル汚染が起きない」というメリットが大きく、慣れると驚くほど速く UI が組めるようになります。
Tailwindの設定とカスタマイズ
Tailwindの強みは設定ファイルでデザイントークン（色、スペース、フォントサイズ等）を統一管理できる点。tailwind.config.js で theme.colors や theme.spacing を拡張すれば、独自のブランドカラーやスペース体系を組み込めます。
v3 以降のJITコンパイラはHTMLを解析して使ったクラスだけを生成するため、出力CSSが極小（数十KB）で済みます。v4（2024年公開予定）はRust製のエンジンで更に高速化されています。
BootstrapなどのCSSフレームワークと比較
Bootstrapが「ボタンやカードのコンポーネントが完成形で提供される」のに対し、Tailwindは「素材を提供」するアプローチ。「とにかく速く既製品っぽいUIを作る」ならBootstrap、「独自デザインを効率的に作る」ならTailwindという棲み分けが現代的です。
近年はBootstrapを使う新規案件は減り、Tailwindが新規Webアプリの第一候補になる傾向。shadcn/ui（Tailwindベースのコンポーネント集）など、コンポーネントカタログ系の選択肢も充実してきました。
Tailwindのエコシステム
Tailwind は公式・サードパーティ含むエコシステムが充実しています。公式の Tailwind UI（有料）は数千のコンポーネント例を含み、商用案件で重宝されます。Headless UI、shadcn/ui、DaisyUI などのコミュニティ系も豊富で、要件に合わせて選べます。
開発体験面では VS Code 拡張機能の「Tailwind CSS IntelliSense」が秀逸で、クラス名補完・色プレビュー・重複クラス警告まで提供してくれます。
まとめ
Tailwind CSSはWebフロントエンドの「CSSの書き方」を根本から変えた現代的なフレームワークです。賛否はありますが新規案件での採用率は高く、Reactや Vue とセットで使う技術として定着しています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント