Tailwind CSS を学ぶとよくあるつまずきポイントと対策をまとめました。

⚠️ つまずきポイント＆対策
1
「クラス名が多すぎて HTML が読みにくい」
Tailwind の HTML は class が長くなりがちです。慣れると読めるようになります。 React・Vue のコンポーネントに分けることで管理しやすくなります。
2
「w-32 が何px か分からない」
Tailwindの数値は 0.25rem 単位です。w-4=16px、w-8=32px、w-16=64px、w-32=128px。 VSCode の「Tailwind CSS IntelliSense」拡張を入れると自動補完でサイズが表示されます。
3
「hover: クラスが効かない」
hover: クラスはスペースなしでつなげて書きます（例：hover:bg-blue-700）。 スペースを入れると別のクラスとして認識されてしまいます。
4
「レスポンシブクラスが反映されない」
Tailwind はモバイルファーストです。md:text-xl は画面幅が 768px 以上のときだけ適用されます。 ブラウザの開発者ツールで画面幅を変えて確認してみましょう。
5
「flex を付けたのに中央揃えにならない」
flex だけでは横に並ぶだけです。中央揃えには justify-center（横方向）と items-center（縦方向）の両方が必要です。また親要素に高さ（h-N）が必要な場合もあります。