Next.jsのTailwindCSS入門

Last updated at 2024-06-25Posted at 2024-06-02

シリーズのトップは↓こちら

前回の記事は↓こちら

たまたまプライベートで人にNext.jsと一緒にTailwindCSSを叩き込む機会がありまして、せっかくなので再びこの場をお借りしていっしょに復習します。

前回のポイント（再掲）（抜粋）

src/app/globals.cssの基本はたった３行
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
src/app/layout.tsx
- HTMLの比較的外側の部分を生成するのがこのファイル
HTMLのclassはTSXではclassName
TailwindCSSではclassがいっぱい準備されている
- classを指定するだけでOK

前回一部の（ダークモードでない）方はこんな画面になったのではないでしょうか。

この意図しないしましまを取り除きます。

今回は背景と文字の色を選んでみます。

お好みの色をこれらのページから選びます。上のほうの表から文字の色と背景の色をお好みで選んでClass欄の名前を控えておきます。

見づらい色の組み合わせに気をつけましょう。文字が消えてびっくりします。

背景の色は↓こちらから

文字の色は↓こちらから

私ははこんな色を選んでみました。

背景	文字
bg-blue-500	text-white

まずはsrc/app/layout.tsxを開きます。

src/app/layout.tsx（抜粋）

  return (
    <html lang="en">
      <body className="bg-blue-500 text-white">{children}</body>
    </html>
  );

この<bodyの行のclassName=の後を書き換えます。

私は↓この色を選んだので、

背景	文字
bg-blue-500	text-white

<body className="bg-blue-500 text-white">{children}</body>←こうしました。

次に、src/app/globals.cssです。

src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

TailwindCSSにおいて大事な↑この３行だけにします。あと全部消します。
（見た感じですが、しましまはこの消した部分に記述されているようです）

するとこうなりました。
背景の色も文字の色も意図したとおりです！🎉

今回はここまでにしました✨

src/app/globals.cssの基本はたった３行
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
src/app/layout.tsx
- HTMLの比較的外側の部分を生成するのがこのファイル
HTMLのclassはTSXではclassName
TailwindCSSではclassがいっぱい準備されている
- classを指定するだけでOK