TL;DR
flex や p-6 のような単一目的のユーティリティクラスを、マークアップの中で組み合わせてスタイルを書く CSS フレームワーク。
なぜ必要か
公式ドキュメントによると、ユーティリティクラスで書くと、クラス名やセレクタを考えたり HTML と CSS のファイルを行き来したりせずに済む。クラスの追加や削除はその要素にしか影響しないので、安全に変更できる。クラスを使い回せるので、機能が増えても CSS が増え続けない。
公式ドキュメントは、インラインスタイルと比べた利点を 3 つ挙げている。1 つ目に、値をあらかじめ決めたデザインシステムから選ぶので、マジックナンバーにならず、見た目のそろった UI を作りやすい。2 つ目に、インラインスタイルでは書けない hover や focus などの状態を、hover: などのバリアントで書ける。3 つ目に、インラインスタイルでは使えないメディアクエリを、md: などのレスポンシブ用のバリアントで書ける。
仕組み
Tailwind はプロジェクトのファイルを走査し、クラス名らしい文字列を探す。見つけたクラスに対応する CSS だけを生成し、1 つのスタイルシートにまとめる。
クラスの前に hover:、sm:、dark: などのバリアントを付けると、その状態のときだけスタイルが当たる。bg-[#316ff6] のように角括弧で任意の値も書ける。
例
<button class="bg-sky-500 hover:bg-sky-700 sm:px-6">Save</button>注意点
同じ CSS プロパティを対象にする 2 つのクラスを付けると、class 属性の順ではなく、スタイルシートで後に出てくるクラスが勝つ。公式ドキュメントは、衝突するクラスを同じ要素に付けないよう勧めている。クラスの並びが長くなりやすいので、重複はコンポーネントやテンプレートの部品にまとめる。