ブラウザ拡張開発日記

作ってるもの→ https://chrome.google.com/webstore/search/cside?_category=extensions

Tailwind は最低限のデザインで構わない自分にとっては Not for me だった

前提:私の目的は「デザインは最低限見た目が整ってればいいから、とにかくかける工数を最小にしたい」

  • Tailwind 、Bootstrap みたいなもんだと思って入門してみたら全く非なるものだった。両者は役割がぜんぜん違う
    • Tailwind の役割:デザインシステムを自分で組むための下地みたいな役割
    • Bootstrap の役割:デザインを全て Bootstrap に委ねるもの
  • Bootstrap は読み込むだけでそれっぽいデザインにしてくれるけど Tailwind はそういうのが全く無い
    • むしろほぼ全部のスタイルがリセットされるので、例えば h1, h2, h3 とかのフォントサイズとかを全部ゼロから決めていかなければならない
    • Tailwind UI とか DaisyUI みたいな UI 集はあるけれど、それらは UI パーツの見た目は整えてくれるが、それ以外の、例えば諸々の文字サイズや余白などを全部自分で決めなきゃいけないという問題は解決しない(そりゃそう)
  • 一方 Bootstrap は、bootstrap.css を読み込めば全部それっぽい見た目に整えてくれることが強み
    • なので自分で当てなきゃいけないスタイルがほとんど無い
    • ゆえに「 Bootstrap 感 丸出しで構わない」自分にとっては、Bootstrap のほうが低工数マークアップできる
    • 出来合いの UI パーツが公式で無料で提供されており *1 、種類も最低限で選択に悩まなくていいのも良い
      • つまり、自分は別にデザインのカスタマイズ性は求めていない

なので、世間的には Tailwind アゲの流れだけど、個人開発で使うぶんにはまだ Bootstrap だなー、と思ったのであった。

*1:Tailwind の公式 UI パーツ集はほぼ有料