More than 3 years have passed since last update.

BootstrapからTailwindに乗り換えを試みる

Last updated at 2022-02-08Posted at 2022-02-06

はじめに

普段フロントの見た目をBootstrapで誤魔化して生きているが、Bootstrap感が嫌になる事がある。
TailWindというのが何やら流行っているらしく、
公式ドキュメントを流し見した感じBootstrap感が全然無かったのでちょっと触ってみる。

うーん・・・

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

ボタン1つでこれだけクラスを書かないといけないとなると、色んなページでこのボタンをコピペしないといけないんかぁ・・・。
複数人で開発するとなると勿論全く同じクラスを書く訳では無いし、なんだかなぁ・・・。

あれ？もしかしてTailWindでそのまま書くのでは無く、プロジェクト単位でコンポーネントを作ってそれを使えって事か？
じゃあ誰かコンポーネント作ってんじゃねぇか？

と思ったのでTailWindをBootstrapみたいに書けるコンポーネントを探してみました。

TailWindで作られたUIコンポーネント、やはりありました。
bootstrapのようにデザイン済みのパーツが用意されてるので最低限の記述で済みます。

ドキュメントも見やすくて欲しいものを探しやすいので大変ありがたい。

こちらもコンポーネントと言えばコンポーネントなんですが、
TailWindで作られたパーツのレシピ集みたいなものです。

ボタンが欲しければ1からTailwindで書くのでは無く、TailWindで作られたボタンをコピペしようぜって感じですね。
なのでレシピ集という表現の方が分かりやすいです。

TailWindをそのまま使うのは自分には向いてなさそうなのでdaisyUIをベースにちょい足ししたりして活用して見ようと思います。