Tailwind CSSの基本：クラスで素早く見た目を整える

この節で学ぶこと

この節では、Next.js の中で Tailwind CSS を使いながら、クラスを足して見た目を素早く整える感覚 を身につけます。

Tailwind CSS は utility-first の CSS フレームワークで、flex、p-4、text-center のような単機能クラスを直接マークアップへ書き、組み合わせてデザインを作る考え方を取ります。

Next.js 公式も、App Router で Tailwind CSS を使う方法を案内しています。

この節のゴールは、次の一言を自分で言えるようになることです。

「Tailwind CSS は、見た目を小さな部品に分けて、クラスを積み上げて作る。」

今日は、余白、文字サイズ、色、枠線、角丸、幅、高さ、状態変化、レスポンシブ指定の入口までを、Next.js の app/page.tsx で手を動かしながら確認します。

Tailwind のレスポンシブ指定は sm: や md: のような接頭辞で行います。

まず最初にやること

Next.js で Tailwind CSS を使う前提なので、プロジェクト側では Tailwind が使える状態になっている必要があります。

Next.js 公式の CSS ガイドでは、Tailwind CSS を使う場合に tailwindcss と @tailwindcss/postcss を追加し、グローバル CSS で Tailwind を読み込む流れが案内されています。

Tailwind 公式にも Next.js 向けのセットアップガイドがあります。この節では、その準備は終わっている前提で進めます。

つまり、app/page.tsx**** に className を書いたら、すぐ見た目が変わる状態を前提にします。

Tailwind CSS の見方

Tailwind CSS のクラスは、ざっくり次のように読めます。

この図の通り、Tailwind は「このクラスは余白」「このクラスは文字サイズ」というように、意味がかなりはっきりしています。Tailwind 公式も、単機能の utility classes を組み合わせてスタイルを作る方式だと説明しています。

大事なのは、最初から全部覚えようとしないことです。

今日は、よく使うクラスだけを少しずつ足しながら、画面がどう変わるかを見る 形で進めます。

まずは何も整えていない画面を見る

次のコードを app/page.tsx に書いてください。

export default function Page() {
  return (
    <main>
      <h1>会員登録</h1>
      <p>必要事項を入力してください。</p>
      <button>登録する</button>
    </main>
  )
}

この時点では、かなり素の HTML に近い見た目です。

ここから、クラスを少しずつ足していきます。

練習1 余白を付ける

まずは画面の外側と、まとまりの中に余白を入れます。

次のコードに置き換えてください。

export default function Page() {
  return (
    <main className="p-6">
      <section className="p-6">
        <h1>会員登録</h1>
        <p>必要事項を入力してください。</p>
        <button>登録する</button>
      </section>
    </main>
  )
}

ここで使っている p-6 は padding、つまり内側の余白です。 Tailwind は spacing scale に従って p-*、mt-*、px-* などのクラスを提供します。

見るポイントはこれだけです。

余白があるだけで、急に読みやすくなる。

これは画面設計で本当に大切な感覚です。

練習2 文字の強弱を付ける

次は、見出しと本文に差を付けます。

export default function Page() {
  return (
    <main className="p-6">
      <section className="p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4">登録する</button>
      </section>
    </main>
  )
}

ここで新しく使ったのは次です。

• text-2xl
• font-bold
• mt-2
• text-sm
• text-gray-600 text-* は文字サイズや色、font-* は太さ、mt-* は margin-top、つまり上方向の外側余白です。

Tailwind 公式の utility-first の考え方では、こうした小さなクラスを直接マークアップへ組み合わせていきます。

この時点で、見出し・説明文・ボタンの順番がかなり見やすくなります。

練習3 枠と角丸を付ける

今度は、まとまりとして見えるように、枠と角丸を付けます。

export default function Page() {
  return (
    <main className="p-6">
      <section className="rounded-2xl border p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4">登録する</button>
      </section>
    </main>
  )
}

ここで足したのは、

• rounded-2xl
• border です。

rounded-* は角丸、border は枠線です。

この2つを足すだけで、「ただ並んでいる情報」から「1つのカード」へ見え方が変わります。

練習4 ボタンらしくする

次は、ボタンを押したくなる見た目へ少し寄せます。

export default function Page() {
  return (
    <main className="p-6">
      <section className="rounded-2xl border p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 rounded-lg border px-4 py-2 font-medium">
          登録する
        </button>
      </section>
    </main>
  )
}

ここで新しく使ったのは、

• rounded-lg
• px-4
• py-2
• font-medium です。

px-* は左右の padding、py-* は上下の padding です。

つまり、ボタンの「押せそうな厚み」を作っています。

練習5 背景色を分ける

次は、ページ全体とカードの背景を分けて、立体感を少し出します。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-6">
      <section className="rounded-2xl border bg-white p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 rounded-lg border px-4 py-2 font-medium">
          登録する
        </button>
      </section>
    </main>
  )
}

ここで新しく使ったのは、

• min-h-screen
• bg-gray-50
• bg-white です。

min-h-screen は最小高さを画面いっぱいにする指定、bg-* は背景色です。

ページ背景を薄いグレー、カードを白にするだけで、UI がかなり整理されて見えます。

練習6 幅を制御する

カードが横に広がりすぎると読みづらくなることがあります。

そこで幅を制御します。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-6">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 rounded-lg border px-4 py-2 font-medium">
          登録する
        </button>
      </section>
    </main>
  )
}

ここで新しく使ったのは、

• mx-auto
• max-w-xl です。

mx-auto は左右中央寄せ、max-w-xl は最大幅の制限です。

読みやすい画面は、横幅が広すぎないことも重要です。

練習7 状態変化を付ける

Tailwind CSS では、hover などの状態変化もクラスで書けます。

次のようにボタンを少し変えてみてください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-6">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 rounded-lg border px-4 py-2 font-medium hover:bg-gray-100">
          登録する
        </button>
      </section>
    </main>
  )
}

hover:bg-gray-100 は、マウスを乗せたときだけ背景色を変える指定です。

Tailwind では、このように variant をクラス接頭辞として付けて状態変化を書けます。

Tailwind v4 では CSS-first 設定や新しい構成が導入されていますが、utility classes と variants を組み合わせる基本の考え方はそのままです。

練習8 入力欄も整える

ここまで来たら、フォームらしい画面へ一歩進めます。

次のコードを打ってください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-6">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>

        <div className="mt-6 grid gap-4">
          <input
            className="rounded-lg border px-3 py-2"
            placeholder="名前"
          />
          <input
            className="rounded-lg border px-3 py-2"
            placeholder="メールアドレス"
          />
          <button className="rounded-lg border px-4 py-2 font-medium hover:bg-gray-100">
            登録する
          </button>
        </div>
      </section>
    </main>
  )
}

ここで見てほしいのは、入力欄にもボタンにも同じ丸みや余白のルールを使っていることです。

見た目に一貫性が出ると、画面全体がかなり整って見えます。

レスポンシブ指定を1つだけ入れる

最後に、スマホでは詰まらないようにしつつ、広い画面では少し余裕を持たせる書き方を 1 つだけ確認します。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-4 md:p-8">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-5 md:p-8">
        <h1 className="text-2xl font-bold md:text-3xl">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600 md:text-base">
          必要事項を入力してください。
        </p>

        <div className="mt-6 grid gap-4">
          <input
            className="rounded-lg border px-3 py-2"
            placeholder="名前"
          />
          <input
            className="rounded-lg border px-3 py-2"
            placeholder="メールアドレス"
          />
          <button className="rounded-lg border px-4 py-2 font-medium hover:bg-gray-100">
            登録する
          </button>
        </div>
      </section>
    </main>
  )
}

このコードでは、

• 小さい画面では p-4
• md: 以上では p-8
• 見出しも md:text-3xl で少し大きく しています。

Tailwind のレスポンシブ指定は、各 utility class を条件付きで上書きしていく方式です。

ここで覚えるべき最小セット

今の段階では、次のクラス群をまず使えるようになれば十分です。

<div className="p-4" />
<div className="mt-4" />
<div className="text-2xl" />
<div className="font-bold" />
<div className="text-gray-600" />
<div className="border" />
<div className="rounded-lg" />
<div className="bg-white" />
<div className="max-w-xl" />
<div className="mx-auto" />

これだけでも、かなり多くの「最低限読みやすい UI」が作れます。

Tailwind CSS の強みは、こうした小さな道具をすぐ組み合わせられることです。

手を動かす確認問題

問題1

次のコードへ、外側の余白、枠線、角丸 を足してください。

export default function Page() {
  return (
    <main>
      <section>
        <h1>お知らせ</h1>
        <p>本日の受付は18時までです。</p>
      </section>
    </main>
  )
}

答え

export default function Page() {
  return (
    <main className="p-6">
      <section className="rounded-xl border p-6">
        <h1>お知らせ</h1>
        <p>本日の受付は18時までです。</p>
      </section>
    </main>
  )
}

解説

p-6 で余白、border で枠線、rounded-xl で角丸を追加しています。

Tailwind CSS は、こうした見た目の要素を 1 クラスずつ足していくのが基本です。

問題2

次の見出しを、少し目立つ見た目 にしてください。

<h1>新着情報</h1>

答え

<h1 className="text-2xl font-bold">新着情報</h1>

解説

text-2xl でサイズを上げ、font-bold で太さを付けています。

文字の強弱を作るだけで、情報の優先順位がかなり見えやすくなります。

問題3

次のボタンへ、押せそうな厚み を付けてください。

<button>送信</button>

答え

<button className="rounded-lg border px-4 py-2 font-medium">
  送信
</button>

解説

px-4 と py-2 で左右・上下の余白を作り、rounded-lg と border でボタンらしい見た目を足しています。

UI では、クリック対象に十分な余白がある方が見やすく操作しやすくなります。

まとめ

この節でやったことは、派手なデザインではありません。

でも、とても重要です。Next.js の中で Tailwind CSS を使うとき、まずは 余白、文字、色、枠線、角丸、幅 のような基本クラスを積み上げていくことが、最短で見た目を整える道になります。

Next.js 公式は Tailwind CSS を主要な CSS 手法のひとつとして案内しており、Tailwind 公式は utility classes を直接マークアップに書く utility-first の考え方を示しています。

大事なのは、全部覚えることではありません。

クラスを1つ足すと、画面が1つ変わる。

この関係が見えたら十分です。

次は、この見た目の調整を、ページ全体の設計やコンポーネント単位のスタイリングへつなげていきます。

参考文献

• Next.js Docs, Getting Started: CSS.
• Next.js Docs, App Router: Getting Started.
• Tailwind CSS Docs, Styling with utility classes.
• Tailwind CSS Docs, Responsive design.
• Tailwind CSS Home.
• Tailwind CSS v4.0 announcement.