BootstrapからTailwindowへ

Overview

1%のブログでは、CSSフレームワークをBootstrapからTailwindowへ変更することにしました。

Motivation/Context

フロントエンド担当のマーシーくんの開発スタイルが「ピクセルパーフェクト」ということで、それを最大限に活かせそうなTailwindを採用したっていう経緯になりますね。

Get Started!!

BootstrapとTailwindowの違い

Bootstrapはコンポーネント指向のcssフレームワークですので、あまりスタイルの微調整には向かないんですよね。
実際、僕がずっとBootstrapを使っている理由もこれでした。
正直、細かいcssは一切描きたくなくて、デザインとちょっと違ってでも開発工数を下げるために妥協していた部分がありました。

一方、tailwindはその逆をいくみたいです。クラス名に変数を入れたりと、cssを直接書かなくていいけれどクラス名をいい感じに使い分けてスタイルを調整しているみたいです。

同じcssフレームワークでもこんな違いがあるんだ。

普段バックエンド開発ばかりの自分にとって、久々にフロントエンドに関する話ができたのは有意義な時間でした。