Tailwind CSSは本当に便利？従来のCSSとの比較で分かる、メリット・デメリット

はじめに 「classに大量のユーティリティクラスを書くのって保守性が悪くない？」 Tailwind CSSを初めて見たとき、こんな疑問を抱いた方は多いのではないでしょうか。HTML要素のclass属性に長々とクラス名が並ぶ姿は、一見すると混乱を招きそうに見えます。 しかし、実際に使ってみると、その考えが変わるかもしれません。本記事では、従来のCSS（BEM記法など）、CSS Modules、Tailwind CSSの3つのアプローチを実際のコード例で比較し、それぞれのメリット・デメリットを客観的に評価します。 また、「インラインスタイルと同じでは？」といったよくある誤解にも丁寧に回答し、読者が自信を持ってスタイリング手法を選べるようにします。 スタイリング手法の全体像 まず、現代のフロントエンド開発で主に使われるスタイリング手法を整理しましょう。 本記事では、特に以下の3つに焦点を当てま

[glass-_-onion]

Tailwind確かに良いんだけど、今ゼロから技術選定するならPandaCSSの方がいいよ。型安全だったりデザイントークンとの相性が良かったりTailwindをさらに進化させた感じ。

[suika3417]

ユニークのクラスかidがついてないと、いざって時のデバックで全部同じdivに見えて辛いんだよね

[s025236]

bootstrapはレガシーなデザイナさんでも知ってるのでプロジェクトに採用することが多いけどtailwindは学習コスト高くてコンポーネント志向で素のcss書いてもらうほうがちゃんと書けたりするので採用しづらいんだよね

[pmint]

Tailwindは大昔から初心者がやってたやつを名人芸で組んだもの。新しくはない。だから良さそうに見えるのは自然なこと。TwitterのBootstrap にもあった。

[mole-studio]

クラス名を付けなくていいのが良い

[yarumato]

“1. 従来のCSS、BEM記法など（クラス名から用途が明確、命名に悩む）、2. CSS Modules（クラス名の衝突を自動的に防ぐ、ビルドツール面倒）、 3. Tailwind CSS（CSSファイル記述不要、見た目が煩雑）、の3つをコード例で比較”