Tailwind CSSの基本

なぜ学ぶか： AIが作るUIのclassNameにはflex items-center gap-2 p-4のような呪文が並びます。これがTailwind — CSSファイルを書かず、用意されたクラスを組み合わせる方式です。呪文の読み方を覚えましょう。

まずはこの例を見てみましょう

//        ┌ 角丸   ┌ 枠線  ┌ 白背景   ┌ 内側の余白16px
<div className="rounded-lg border 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つの見た目、を組み合わせています。