フロントエンドの開発でBootstrapよりもTailwindがおすすめな理由

はじめに

普段はBootstrapをメインで使っていましたが、直近でTailwindを使う機会がありました。
Bootstrapより良いと感じたのでそのポイントをまとめてみました。
ここではデザインシステムなどの難しい話はしません。

前提

• フロントエンドフレームワークを使用してwebアプリケーションを作る前提
• デザイナー不在でエンジニアが画面を作る前提

コピペでUIを組み立てた時にCSSのトラブルシューティングしやすい

UIを作成する場合はCSSの事を何も考えずに用意されたコンポーネントをコピペして画面を組み立て、何か問題がおきた時にのみ開発者ツールからCSSを読んで対応する流れになるのかなと思います。
それはBootstrapでもTailwindでも同じです。
Tailwindは1つのクラスが1つのCSSプロパティに対応しているため、要素に紐づいているクラスとCSSプロパティが明確でトラブルシューティングが行いやすいと感じました。
Bootstrapの場合は1クラスに複数のCSSプロパティが紐づいており、さらにそこから別のクラスでCSSプロパティを無理やり上書きするような書き方になっている事が多く、読み解くまでに時間がかかってしまいます。

また、Tailwindを使うと1要素に大量のクラスが並んでしまうため読みにくいという批判を聞きますが、実際の画面構築ではクラスを読む必要はほぼなく、用意されたコンポーネントをコピペして単純に組み立てるだけです。
それならトラブルシューティングが容易でCSSが読みやすいTailwindのほうが良いと思いました。

UIテーマ間でのコンポーネントの共有がしやすい

UIを作成する場合は1つのUIテーマに絞って作ると思うのでこのケースは稀だと思います。
今回のケースでは、TailwindUIをベースにUIを作成していてサービスにマッチするコンポーネントがTailwindUIにはなく、flowbiteにはあるといった状態でした。
こういった場合にTailwindの1クラス1プロパティがいい仕事をします。
Tailwindスタイルのコンポーネントは1クラス1プロパティで配布されているため、TailwindUIのコンポーネント内にflowbiteのサンプルコードをコピペするだけで、簡単に組み込む事ができます。
もちろん細かい調整は必要ですが、同じ事をBootstrapで行うと困難です。
Bootstrapは公式を除き、1テーマ単位で配布されている事が多くスタイルとテーマが密結合しているため、必要なパーツを切り出すだしてそこから調整作業をしなくてはならないのでTailwindと比べると作業量が多くなってしまいます。

おわりに

コピペでUIを組み立てるなら速度はBootstrapもTailwindも変わりません。
特定のBootstrapテーマにこだわりがなければ、CSSが読みやすくて汎用性の高いTailwindを使えばよいのではと思いました。