「Tailwind CSS は複雑性が増すだけ」という批判的な意見を聞いたことがあったり、単なるエイリアスだったら生の CSS 書いたほうが良いのではないかと思って利用を避けてきたが、試しに使ってみると案外便利だった。
業務利用で使えるとか使えないとかの話はないです。
行き当たりばったりコーディングが楽
自分がスタイルを当てるときは、すでに頭の中や Figma に完成されたデザインがあって、それを忠実に実装していく……というやり方ではない。「とりあえず適当にやってみて、見た目を確認して、よさそうだったらそれでいい」というかなり行き当たりばったりなもの。
この開発方法だと、書き換えては画面を見て、書き換えては画面を見て、という繰り返し作業が発生する。tsx と css ファイルをそれぞれいじらないといけなかったり、変更した結果クラス名が合わなかったりといったやや面倒なことが発生する。
自分が今やっている個人開発では、規模が小さいうえに CSS modules を使っているので、クラス名を考える意味はそこまでない。Tailwind CSS を使うと、クラス名をわざわざ考えなくて済むから、そこは楽だと感じた。
さらに、css ファイルを作らなくても、tsx ファイルに直接クラスを書いてスタイルを当てられるのも楽に感じるポイント。以前、インラインで CSS を書くことを試したことがあって、Tailwind CSS がやっていることはまさにそれと同じ。自分がもともとやりたいと思っていたスタイルに一致していると感じた。インライン CSS はよくないという話はあるけど。
選択肢が提示されていて楽
デザインを決めてから実装するのではなく、行き当たりばったりで決めることが多いので、素の CSS だと細かすぎる設定に悩むことがあった。例えば、文字サイズを決めるときにどのくらいの大きさが良いのか迷ってしまう。しかし、Tailwind CSS だと text-sm、text-base、text-lg のように大きさがあらかじめ決まっているから、その中からどれかを選べばいい。
最初にどのコンポーネントでも利用できるカスタムプロパティを定義すれば良いという話でもある。
Q&A コーナー
Q. クラス名が長くなって読みにくくないですか
最低限のスタイルを当てただけの地味なサイトしか作ってないから、クラス名が長くて読みにくくなることはなかった。あと、自分しか実装しないからマシに思えるのかも。
Q. 学習コスト高くないですか
何も思わなかった。CSS リファレンス - CSS: カスケーディングスタイルシート | MDN より Installing Tailwind CSS with Vite - Tailwind CSS のほうが自分はとっつき易い。Tailwind で CSS に入門してちゃんと知りたくなったら MDN のドキュメントを読めばよさそう。
感想
自分しか触らない規模の小さいプロダクトでちょっと導入しただけなので、規模が大きく長期的に複数人で開発する場合でも便利かどうかはわからない。
ただ、小さなプロダクト開発で最低限のスタイルを当てるだけであれば、良い選択肢になるんじゃないかと感じた。