CSS と Tailwind の比較

クラシック CSS は複雑なセレクタやアニメーションに強い。Tailwind は見た目の判断をマークアップと同居させる。多くのチームは併用します。

従来の CSS と Tailwind は対立せず、得意分野が違います。複雑なセレクタやアニメーションは CSS、視覚的な判断をマークアップの近くに置くなら Tailwind です。線引きはチームの慣れも含めて確認しましょう。

CSS に残すとき

複雑なアニメ、print、多数ノードをまたぐセレクタは CSS の方が楽なことが多い。Tailwind はマークアップとスタイルが一緒に動くコンポーネント UI で輝く。

対立せず比べる

グローバル reset ではなく card や toolbar を翻訳する。コンバーターのメモを読み、トークン／任意値／手書き CSS を選ぶ。

チームの基準

ページ丸ごと移行の前にスケールと例外を合意する。「対比」は運用の話であり信条ではない。

試す

コンバーターを開く

.example { display: flex; gap: 1rem; padding: 1rem; }

信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。