Tailwind CSSでスタイルを当てる：トップページのデザインを完成させる

たける CSSファイル書くの大変なんですよね。クラス名考えて、ファイル切り替えて……Tailwindって何がいいんですか？

りこ CSSファイルを作らなくていい。デザインの意図がJSXに直接書かれるので、コンポーネントとスタイルがセットで読める。

Tailwind CSSとは

Tailwind CSSは「ユーティリティファースト」なCSSフレームワーク。あらかじめ用意されたクラスを組み合わせてデザインする。

// 従来のCSS
// → styles.css に .hero { padding: 48px; background-color: ... } と書いて
// → JSXで <section className="hero"> と使う

// Tailwind
// → JSXに直接クラスを書く
<section className="py-12 bg-slate-900 text-white">

Viteのプロジェクトにはすでに @tailwindcss/vite が入っている（このシリーズでは設定済みの状態でスタートしている）。

クラス名の読み方

Tailwindのクラス名は プロパティ-値 の形になっている。

p-4     → padding: 1rem（4 × 0.25rem）
px-8    → padding-left / padding-right: 2rem
py-12   → padding-top / padding-bottom: 3rem
m-0     → margin: 0
mt-4    → margin-top: 1rem

text-xl → font-size: 1.25rem
text-3xl → font-size: 1.875rem
font-bold → font-weight: 700
text-slate-900 → color: #0f172a
text-white → color: #fff

bg-slate-900 → background-color: #0f172a
bg-sky-500   → background-color: #0ea5e9

rounded-lg → border-radius: 0.5rem
rounded-2xl → border-radius: 1rem
shadow-sm → box-shadow: 0 1px 2px ...

flex → display: flex
items-center → align-items: center
justify-between → justify-content: space-between
gap-4 → gap: 1rem

grid → display: grid
grid-cols-3 → grid-template-columns: repeat(3, 1fr)

たける `p-4` が `1rem` になるんですか。数字と実際のサイズの対応が覚えられなそう。

りこ 最初は覚えなくていい。VS Codeにカーソルを当てると実際の値が表示される。使いながら慣れる。

レスポンシブ対応

Tailwindはブレークポイントのプレフィックスを使って、画面サイズ別のスタイルを書ける。

<div className="px-4 sm:px-8 lg:px-16">

モバイルファーストの考え方：プレフィックスなしが「最小幅（モバイル）」に適用される。大きくなるにつれてプレフィックス付きで上書きする。

// モバイルは1列、lg以上は3列
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">

トップページを作る

ここまでの知識でトップページを組み立てる。

// src/components/Hero.tsx
export const Hero = () => {
  return (
    <section className="bg-slate-900 text-white py-20 px-4">
      <div className="max-w-3xl mx-auto text-center">
        <p className="text-sky-400 text-sm font-bold tracking-widest uppercase mb-4">
          React実践シリーズ
        </p>
        <h1 className="text-4xl sm:text-5xl font-bold leading-tight mb-6">
          生成AI時代の<br />React実践入門
        </h1>
        <p className="text-slate-400 text-lg leading-relaxed mb-8">
          対話形式で学ぶ、実践的なReactの教科書。<br />
          開発環境の構築からWebサイト公開まで。
        </p>
        <a
          href="/series/react-basics"
          className="inline-block bg-sky-500 hover:bg-sky-400 text-white font-bold px-8 py-3 rounded-xl transition-colors"
        >
          第1回から読む
        </a>
      </div>
    </section>
  )
}

// src/components/FeatureCard.tsx
type FeatureCardProps = {
  icon: string
  title: string
  description: string
}

export const FeatureCard = ({ icon, title, description }: FeatureCardProps) => {
  return (
    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-6">
      <span className="text-3xl mb-4 block">{icon}</span>
      <h3 className="text-lg font-bold text-slate-900 mb-2">{title}</h3>
      <p className="text-slate-600 text-sm leading-7">{description}</p>
    </div>
  )
}

たける クラス名が長くて読みにくくないですか？ `className="bg-white rounded-2xl border border-slate-100 shadow-sm p-6"` ってなると一行が長くて……。

りこ 慣れると「白背景・角丸・ボーダー・影・パディング」と読める。CSSファイルを行き来しなくていい分、トータルでは速い。複雑になったらTailwindの `cn()` ユーティリティで整理できるけど、今は気にしなくていい。

なつみ たける、作ったHeroコンポーネント見せて。h1が `font-bold` だけだと弱い。見出しは `tracking-tight` を足すだけで締まり方が全然違う。

たける なつみさん！ `tracking-tight` って何ですか？

なつみ `letter-spacing`を詰めるクラス。見出しは`tracking-tight`、バッジやキャプションは`tracking-widest`がよく合う。段階は `tighter / tight / normal / wide / wider / widest` の6段階。

たける 足したらかなりかっこよくなった。デザイン、細部がすごく効くんですね。

なつみ Tailwindはデザイントークンがすでに入ってるから、組み合わせるだけで一定のクオリティになる。色の使いすぎとフォントサイズの乱用さえ気をつければ、初心者でも崩れにくい。

よく使うクラスのチートシート

実際の開発でよく登場するパターンをまとめておく。

{/* 中央揃えのコンテナ */}
<div className="max-w-5xl mx-auto px-4 sm:px-8">

{/* カード */}
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-6">

{/* 横並びで中央揃え */}
<div className="flex items-center gap-4">

{/* ボタン */}
<button className="bg-sky-500 hover:bg-sky-400 text-white font-bold px-6 py-2 rounded-lg transition-colors">

{/* テキスト */}
<p className="text-slate-600 text-sm leading-7">

{/* 見出し */}
<h2 className="text-2xl font-bold text-slate-900">

{/* バッジ・タグ */}
<span className="text-xs font-semibold px-3 py-1 rounded-full bg-sky-100 text-sky-700">

まとめ

• Tailwindはクラスを組み合わせてスタイルを当てる。CSSファイルを別途作らない
• クラス名は プロパティ-値 の形：p-4・text-xl・bg-slate-900
• レスポンシブは sm: lg: などのプレフィックスで書く
• モバイルファーストで設計：プレフィックスなし = 最小幅に適用

次の第8回では、リストレンダリングを学ぶ。特徴カードをハードコードするのをやめて、配列データから map() で生成する方法と、key propが必要な理由を解説する。