【LOG】Next.js に Tailwind CSS を導入してみる

前置き

勉強がてら Web サイトを 1 から作ってみようと考えた。
Next.js を触ったことがあったので、それを使うことを決定。
いざ、作り始めよう！（⇦ イマココ）

CSS どうしよう

とりあえずやったことないことをしたいので、仕事中に小耳に挟んだ TailWind CSS 触ってみることを決意。

本題

公式ページを参考にして Next.js に Tailwind CSS を入れてみる。
Tailwind CSS 公式ページ

1. プロジェクトを作る

npx create-next-app@latest my-project --typescript --eslint
cd my-project

今回はすでにプロジェクト作成済みなので skip

2. Tailwind CSS をインストールする

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. tailwind.config.js を書き換える

module.exports = {
  // この中身は適切に書き換える
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. style 用のファイルを作成してディレクティブをファイルに追加する
./styles/globals.css に下記を追加

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

5. 開発環境を立ち上げる

npm run dev

6. Tailwind CSS を実際にコード内に埋め込む
【Sample】

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

これで動くはず！！！

だったけど css が当たらずにスタイルが変わらなかった...

原因調査log

1. globals.css どこからも import してなかった...
_app.tsx で globals.css を import するように変更

→ できた！
凡ミスすぎて辛かった...

まとめ

ひとまず Tailwind CSS を導入することはできたから、実際に使ってみる！