Tailwind 使ってみた

フロントエンドの実務経験は多くないです。

デザイン系のフレームワークで使ったことがあるのは MUI（Material UI） くらい。
それもコンポーネントをほぼそのまま使うようなプロジェクトだったので、デザインに特段の関心がない自分でも、かなり気楽に今っぽい UI 実装ができました。
がんばっていろいろ思い出してみても、MUI には良い思い出しかないです。

一方の Tailwind は、名前はよく聞くけど深く触れることはなく……といった、自分からちょっと距離のあるものでした。

そんな状況で、昨年エンジニア職を退職しました（今も一応エンジニアだけど……）。
個人開発に時間を割けるようにもなったので、サイトを再構築し、これまで触れてこなかった Tailwind にやっと取り組むことに決めました。

ぶっちゃけ敬遠する理由はごまんとあったのですが（可読性や可読性、可読性とか……）、知的好奇心だけでそう決めました。

使いづらい……

わかっちゃいたけど……使い始めてやっぱり感じたことは、クラスの情報量の多さ。

<div class="flex items-center justify-between px-4 py-2 bg-white shadow-sm rounded-lg"></div>

この例なんてまだ見やすい方……class属性、長すぎる。読みづらいし、横スクロールがつらい。

何のためにこんなものがあるんだと何度も思い、幾度となくアンインストールを踏みとどまって、いつか理解できる日に期待して使い続けたのが実際のところです。

他にも、Tailwind の自由度の高さも、デザインに強い関心があるわけではない自分にとっては当然負担でした。
しかし、こちらはスニペットを拾いまくってしのげました。

いずれも使う前から知っていたことでしたが、それでも可読性の心理的抵抗は高く、自由と引き換えの管理コストがアンインストールへの誘惑になる状態が続きました。

使うこと約２か月

それも学習コストだと割り切って使い続けていたところ、だんたんと別の印象を持つようになりました。

まず、デザインに統一性を持たせるのであれば当然のこと、実際によく使うクラスはある程度固定されていきます。 なので、無限に思えた自由も次第にパターン化したことで落ち着いていきました。

また、自分の傾向かもしれませんが、装飾を盛るより削るほうが好きなので、結果としてシンプルな UI に落ち着いていきます。 それは、見やすく、今っぽさは感じられながらも（＝そこまでダサくないんじゃないか）、過去のネット世界でもみたページと根本は変わらないようなデザインにも思えます。

いくらデザインに疎い自分でも、過去25年ほどインターネットを見てきて、流行の変化ははっきり感じています。
デザインは時間とともに変わる、その点を考えると、Tailwind のように特定のデザイン思想に依存しない形は、コンポーネント型のフレームワークと比較して、長期的には扱いやすいのかもしれないと思い始めました。

デザイン面に限らず、Tailwind は CSS に扱いが近いため、大規模な思想転換が起きにくいのも意外と大きな利点。 良いことばかりだと思っていた MUI も、今思えばバージョンアップはとてつもない障壁でしかなかったので、Tailwind はかなり低リスクと言えそう。

デザインは頻繁に作り直すものではなく、一度作ったらそのまま使い続けることの方が多いと思うので、その点を踏まえてみても、環境依存が少ない Tailwind は、コンポーネント型フレームワークよりも長期的には管理がラクになりそうです。

結論、Tailwind いいじゃん

まとめると、以下のような感じ。

• はじめは、読みにくい
• 設計思想はフレームワークではなく開発者側にある
• 無限の自由も使い続けるとパターン化する
• デザイン含め外部に思想が依存しないため、長期運用のリスクは比較的低い

今後も Tailwind を使い続けて、もうちょっと極めたいと思います。
ちなみに、Tailwind UI 等の Tailwind を用いた UI ライブラリも多くある模様。こちらもそのうち試してはみたい。

Tailwind、長期運用を考えると意外と堅実な選択肢になりそうです。