Tailwind CSS
https://gyazo.com/465413e462244c7366be3a88828069e1
Rapidly build modern websites without ever leaving your HTML.
多数のユーティリティクラスを組み合わせてUIをレイアウトする CSS フレームワーク デフォルトで提供されているデザインがきれいなことが特徴
よくあるレイアウトを作るための CSS が部品として多数あり、必要に応じて選択して利用する
固有のデザインのみを実装して、あとは Tailwind CSS の部品を利用するという省力化ができる
ビルドシステムと連携できるように設計されており、未使用のCSSはビルド結果に含まれない
一方で「ボタン」のような粒度ではなく「角丸」のような単位でユーティリティとして提供される
ボタンを画面内にレイアウトするときに多数のクラスを組み合わせてレイアウトする必要が出てくる
単純にHTMLとCSSのみで記載する場合にはかなりの量のクラスの記述が必要になるので工夫が必要な点に注意したい
具体的には使用する粒度でUIコンポーネントを切り出してユーティリティクラスを意味のある単位で管理して行くなどが必要になりそう
コンポーネントの単位が React 的なものになるか apply を駆使したCSS的なものになるかは適用先の事情を考慮して選んで良い
Tailwind UI は公式の提供だが有料オプションになっている