Tailwind CSSの基本
なぜ学ぶか： AIが作るUIのclassNameにはflex items-center gap-2 p-4のような呪文が並びます。これがTailwind — CSSファイルを書かず、用意されたクラスを組み合わせる方式です。呪文の読み方を覚えましょう。
まずはこの例を見てみましょう
// ┌ 角丸 ┌ 枠線 ┌ 白背景 ┌ 内側の余白16px<div className="rounded-lg border border-gray-200 bg-white p-4"> {/* ┌ 横並び ┌ 縦中央 ┌ 間隔8px */} <div className="flex items-center gap-2"> <span className="text-lg font-bold">Ada Lovelace</span> </div> <p className="text-sm text-gray-600">世界最初のプログラマー</p></div>
CSSを1行も書いていないのにカードが完成。1つのクラス＝1つの見た目、を組み合わせています。
1クラス1役割
例のp-4（余白）・flex（横並び）のように、1クラスが1つのスタイルに対応します。組み合わせて見た目を作ります。
頻出クラスの読み方
p=内側の余白（数字は4px刻み。p-4=16px）、text-lg=文字大きめ、rounded-lg=角丸、flex=横並び。数十個で大半が読めます。
AIと相性がいい理由
スタイルがその場（className）に全部書いてあり、別のCSSファイルを追わなくてよいからです。レビューも「見たまま」で完結します。
読めない呪文はAIに貼る
長いclassNameはそのままAIに貼って「日本語で説明して」でOK。逆に「ここを黒背景・白文字に」と伝えれば正しいクラスが返ります。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。