Next.jsにtailwindを設定する

npx create-next-app@latest --typescript

➜  airbnb-video git:(main) tree -L 1
.
├── README.md
├── app
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
└── tsconfig.json

3 directories, 6 files

npm run dev

http://localhost:3000にアクセスする

次にテキストを表示させてみます。次のファイルのretrunの中身を全て削除しdivタグでテキストを表示させてみましょう。

import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from './page.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <div>Hello Airbnb!</div>
  )
}

http://localhost:3000を再度確認すると、divタグ内のテキストが表示されているのが確認できます。

次にブラウザのタブに表示されるテキストを変更してみましょう。

初期設定では「Create Next App」と表示されていますが、このテキストはapp/layout.tsxに記述されています。

import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

上記ファイルの４行目にCreate Next App の記述がありますね。

ここを以下のように変えてみましょう。descriptionも併せて変えておきます。

import './globals.css'

export const metadata = {
  title: 'Airbnb',
  description: 'Airbnb clone',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

これで再度http://localhost:3000/を読み込んでみると、

次にHello Airbnb!のフォントの種類を変えてみましょう。

引き続き同じファイルapp/layout.tsx に修正を加えていきます。

以下のように、修正を加えます。

２行目import { Nunito } from "next/font/google"：GoogleFont の Nunito を読み込む
９行目〜const font = Nunito({ ...：ラテン語の書体をセットする
20行目<bady className={font.className}>：上記で設定した書体をページのスタイルに適用させる

import './globals.css'
import { Nunito } from "next/font/google"

export const metadata = {
  title: 'Airbnb',
  description: 'Airbnb clone',
}

const font = Nunito({
  subsets: ["latin"],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={font.className}>{children}</body>
    </html>
  )
}

ページを再読み込みすると、フォントがGoogleFontのNunitoに変わります。

ここで、スタイルをプレーンの状態にするために、app/globals.cssの内容を削除して初期設定で設定されているスタイルを無くしてしまいましょう。

また、app/page.module.cssは、ファイルごと削除してしまいましょう。

app/globals.css はファイルを後で使うので内容を削除、app/page.module.cssは使用しないのでファイルごと削除です。

今回は、tailwindでスタイルをあてていくので、ここからは公式サイトの説明の通りtailwindの設定を行っていきましょう。

まずは、必要なパッケージをインストールします。

次の公式サイトにコマンドを書いてあるので、そのまま実行しましょう。

https://tailwindcss.com/docs/guides/nextjs

npm install -D tailwindcss postcss autoprefixer

これで、package.jsonとpackage-lock.json にtailwindcssとpostcssとautoprefixerのパッケージに関する記述が追記されます。

tailwindと一緒にインストールしているpostcssとautoprefixerについては調べてみてください。

引き続き、上記サイトにあるコマンドを実行して、tailwindとpostcssの設定ファイルを作成します。

npx tailwindcss init -p

これで、tailwind.config.jsとpostcss.config.jsが作成されます。

次にtailwindの設定を追加しましょう。（これも公式サイト書いています。）

tailwind.config.js を開いて、以下のようにcontentの内容を追加します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

次に、app/globals.cssを修正します。

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

ここまでの設定が終わったら、npm run devコマンドを再度実行し、ページを確認してみましょう。

padding が変わっていると思いますが、これまで表示されていたHello Airbnb!がエラーなく表示されていればOKです。

これでtailwindの設定が完了したので、試しにテキストに色を設定しましょう。

app/page.tsxを開いて以下のように、9行目を修正します。

import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from './page.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <div className="text-rose-500 text-2xl">Hello Airbnb!</div>
  )
}

これでページを確認するとテキストHello Airbnb!の色と大きさが変わっていると思います。

全体に適用させたいスタイルについても試しに設定してみましょう。

app/globals.cssを開いて以下のように5行目以降を追加してください。

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

html,
body,
:root {
  height: 100%;
}

ここからは、ナビゲーションバーを作成していきましょう。

app/layout.tsxにNavbarのコンポーネントを追加します。

以下のコードのように<Navbar />を追加します。

（Navbarコンポーネントがないので現時点ではエラーになります）

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={font.className}>
        <Navbar />
        {children}
      </body>
    </html>
  )
}

次のNavbarコンポーネントの実物を作成していきます。

app/components/navbar/Nabvar.tsxを作成します。

app ディレクトリ以下の存在しないディレクトリについては適宜作成してください。

const Navbar = () => {
	return (
		<div>
			I am a Navbar!
		</div>
	)
}

export default Navbar;

このNavbar.tsxをlayout.tsxに読み込ませる必要があるため、以下の３行目のようにapp/layout.tsx にファイルをimportする記述を追加します。

import './globals.css'
import { Nunito } from "next/font/google"
import Navbar from './components/navbar/Nabvar'

export const metadata = {
  title: 'Airbnb',
  description: 'Airbnb clone',
}

これで先ほど、app/layout.tsxに追加したNavbarコンポーネントの実物ができたので画面を更新すると、Navbarが表示されるはずです。

次にNavbarなので画面の上部に固定されるようにtailwindによってスタイルを適用させてみましょう。

以下のようにNavbarコンポーネントのdivタグにスタイルを追加します。

const Navbar = () => {
	return (
		<div className="fixed w-full bg-white z-10 shadow-sm">
			I am a Navbar!
		</div>
	)
}

export default Navbar;

これによりdivタグの要素には次のスタイルが適用されます。

fixed：
w-full：
bg-white：
z-10：
shadow-sm：

Nabvarが画面上部に固定されたので、Hello Airbnb!のテキストがNavbarの後ろに隠れた形になります。

ここまでで、ナビケーションバーの土台を作成することができたので、次回はこれを完成させていこうと思います。