【CSS】tailwind.cssの導入について、向いているケースと向いていないケース
こんにちは!tailwind.cssを導入したら結婚できました。Mizutani(@sirycity)です。
tailwindを導入して数ヶ月、自分の手応えや周りの反応から、CSSフレームワークを導入する際に「こういうケースではtailwindを導入した方が良い」「こういうケースではやめといた方が良い」ってのが徐々に分かってきたので備忘録を兼ねて書いてきます。
向いているケースと向いてないケースを羅列していくぜ。
向いている:フロントエンドが厚い構成, 向いていない:バックエンドが厚い構成
これ大事。これが一番の条件な気がします。より具体的に言うとReact系、Vue系、Angular系を採用しているか否かです。いわゆるモダンフロントエンド。なぜなら...
モダンフロントエンドのエコシステムにロックインしている
tailwindはnpmでの読み込みをほぼ前提としています。cdnでも読み込めるんだけど公式が推奨していない。
これはcdnでの読み込みがベストプラクティスと化しているCSSフレームワークとは一線を画しています。
語弊を恐れず言うならば、npmすら使ってないレガシーフロントエンドはこっちから願い下げだくらいのテンションです。
また、tailwindは軽そうな名前の割にファイルサイズが大きくそのまま読み込むのはあまりよろしくないです。
このため、実際はpurgecss(パージCSS、使ってないCSSを消すやつ)やpostcssと一緒に使われるケースが非常に多いです。
この辺の環境構築をフロントエンドのエコシステムなしで作るのは修羅の道です。そういう意味でも、tailwindはモダンフロントエンドに向いていると考えます。
向いている:フロントエンド周りが少数精鋭, 向いていない:フロントエンド周りが分業
初期導入に時間がかかる
tailwindは上述の通り導入までに時間がかかります。cdnで数行追加すれば使い始められるbootstrapとはわけが違いますわ。
tailwindが爆速になってくるのはある程度開発が進んでからです。したがって、初期導入をスピーディにこなせるスキルのある人員がいないと導入はなかなか難しい...
写経は苦手
tailwindの苦手なことの一つとしてデザインカンプの丸写しがあります。まあこれはCSSフレームワーク全般に言えるかもしれんけど、1px単位の微調整にはすごく不向きです。
デザイナーとコーダーとフロントエンドエンジニアが分業されていて、かつデザインカンプから始まるみたいなかっちりした構成のチームには不向きな気がする...
逆にフロントエンド周りが少数精鋭で、デザインからフロントエンド開発まで同じ人が行うような構成ならtailwindはうってつけです。
結論
ここまでダラダラと書きましたが、tailwindが向いているか向いていないかはこの一言で判断できる気がします
今どきか
以上。ベンチャー企業とかと相性めっちゃ良さそうなので、起業する際はぜひtailwindをご贔屓に(?)
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介