2024年からはTailwindを使い続けると決めた理由

ずっとCSSのStyleをいい感じに使いたいと思いつつ、しっくりくるの運用が見つけられず2024年からTailwindを使い続けることを決めました。

Tailwindはこれまでにも何度か使っていたのですが、いつも別の選択をしていたのですが最近のフロントエンドの状況やAIコーディングの進歩を考えると最善ではないかもしれないけど外れない選択肢と決めました。

同じような悩みを持たれてる方に向けてどういう背景からTailwindを使うように決めたのかをこの記事で整理します。

私が悩んでいたこと

悩んでいたことは下記のようなことで、Tailwindを選ぶことで緩和できたと考えています。

2022年あたりから、Headless UIという考え方が出てきて、スタイリングと振る舞いを分離させる設計が浸透してきていました。

有名なところでは、RadixUIやSpectrumですね。

これに伴い、Headless UIに合わせてStyleingは自分の好きなように設定できるようになり、UIフレームワークを使う傾向が減ってきました。

UIフレームワークは導入が楽な一方で自分のやりたいことから外れてしまうと悩むことが多く、アップデートの対応も含めメンテナンスコストが高くなることが多かったのでヘッドレスUIの選択肢が出てきたのは嬉しく思います。

Headless UIの魅力については別の記事でまとめてします。

またHeadless UIの登場でUIフレームワーク界隈も変化が起き、ライブラリとしてimportするのではなくshadcn/uiのようなコードをコピペして貼り付けるようなコンポーネントライブラリのようなプロジェクトが増えてきました。

こういったプロジェクトではTailwindを使われることが多く、様々なプロジェクトでもTailwindがこれまで以上に選択されるような予想をしています。

ServerComponentsが出てきたことでCSS-in-JSの人気が下がったこともありますが、私自身はそこまで問題視はしていなかったのですが、世間的にはCSS-in-JSが選ばれにくくなるとは思っています。

Stylingに限らず2023年のフロントエンド界隈の話ですとsakitoさんが発表された2023年のフロントエンド振り返りと2024年のスライドにわかりやすくまとまっています。

Tailwindを使うとAIにコード書いてもらったりするときにStyleも一緒にTailwindで書いてと指定すればそのまま使いやすくなります。

GhatGPTに相談するときもHTMLをペーストするときにclassNameでtailwindのstylingもまとめて送れるので一回のペーストで解像度の高く相談ができます。

実は私がTailwindを使うと決めた理由がTailwind Variantsの存在です。

私はStitchesというCSS-in-JSでStylingをすることを好んでいました。

しかし、ServerComponentsが出てきたことでメンテナンスがされない決定がされてしまったので途方にくれていました。

決め手になったと言いつつ、Stitchesの代替を探したのがきっかけですね。

Tailwind VariantsはStitchesと似た書き方でProps毎にStyleの当て方を選べるので私のように小さいComponentsを作るタイプの領域ですと非常に魅力を感じました。

別の候補としては、PandaCSSを考えていたのですが、破壊的な変更の少なさやコピペのしやすさを考えるとTwailwindに軍配が上がりました。

今年はコードを書く時間を増やして複数のサービスをリリースしたいと考えています。

そのため、開発環境やコンポーネントを使い回せると開発時間の短縮につながるのでその点Tailwindは理想的です。

Tailwindのメリットやデメリットなどではなく一人の開発者として2024年の今ならどういう構成を選ぶかをまとめてみました。

余談ですが、Tailwindを使い続けると心に決めたのですぐ意志を変えないように、Taiwind に早速課金しました。5万円近く支払ったので投資と思って使い続ける気持ちです。

自分も数年後この選択が良かったか悪かったかこの記事を見直すのが楽しみです。