Tailwind CSSを使って嬉しいこと

最近Tailwind CSSについてTLでよく見かけるので、触発されて自分も個人的な気持ちを書いてみます。
自分はTailwind CSS推し(推せる場面では)なのでそちら目線です。

デザインシステムをゼロから作らなくて良い

Tailwind CSSを導入するということは、基本的にはTailwind CSSの作ったデザインシステムを導入するということになります。

デザインシステムがあれば、例えば 「文字サイズをここは少し大きくたい」 「余白をここより少し開けたい」 「色をここより少し変えたい」 という時に、定義済みの値を相対的に上げたり下げたりすることで、統一されたスタイルを簡単に保つことができます。

このようなデザインシステムを自分たちで作る必要がなく、デザイナーがいなくても一定のスタイルを維持できるというのが、大きなメリットの1つだと考えています。

FWやコンポーネントライブラリにロックインされない

1点目に挙げたメリットは、例えばReactであればChakra UI、VueであればVuetifyなどの
コンポーネントライブラリを使うことでも享受できます。

（※コンポーネントライブラリとTailwind CSSを比べるのは微妙とは思いつつ）

しかし、Tailwind CSSを使う場合は、すべてが単なるClass名であるため、コンポーネントライブラリにロックインされず、HTMLでも使うことができます。仮にHTMLで作っておいたものをそのままコピペでReactに移植できるなど、柔軟性が高くなります。

Class名が客観的になる

例えば開発者それぞれがCSSでスタイリングするとした場合、他の人がClass名だけ見ても中身は追わないとわからないことがあります。その点、Tailwind CSSを使用する場合は、（Tailwind CSSの知識がある前提であれば）どのようなスタイルが設定されているか判別することができます。

これによって、デザイナーなどコード内のCSSの追い方がわからない人にレビューしてもらいやすくなったり、スナップショットテストとの相性が良くなったりすると考えています。

終わりに

以上が自分のパッと思いついた、Tailwind CSSを使う理由です。
逆にこれらのメリットが不要な時・メリットを受けられなくなるような使い方をしなければならない時は、Tailwind CSSは向かないと思われます。他の方が述べているようなTailwind CSSのデメリットも概ねその通りだと思います。

具体的には

• Tailwind CSSに頼らなくてもデザインシステムができている
• デザインシステム外でガンガンスタイリングしたい（個別にpx単位でスタイリングしていきたいなど）
• FW、コンポーネントライブラリにロックインされても構わない（実際、リプレイスすることなんてほぼ無いですよね）

という時には自分も使わないと思います。