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

はじめに

普段はBootstrapを使っていますが直近の個人開発でTailwindを使いました。
絶賛するほどではありませんが、Bootstrapよりは良いと思ったのでまとめてみました。
ここではデザインシステムなどの難しい話はしません。

前提

• フロントエンドフレームワークを使ってwebアプリケーションを作る前提
• デザイナーがいなくてエンジニアが画面を作る

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

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

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

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

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

おわりに

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