シリーズのトップは↓こちら
前回の記事は↓こちら
たまたまプライベートで人にNext.jsと一緒にTailwindCSSを叩き込む機会がありまして、せっかくなので再びこの場をお借りしていっしょに復習します。
前回のポイント（再掲）（抜粋）
-
npm run dev- （作ってる途中の）Next.jsを動かす
- だいたい
http://localhost:3000で見れる
今回のポイント
-
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
-