Next.js 13 + TypeScript 環境で Tailwind CSS を利用する

TOP
Next
Next.js 13 + TypeScript 環境で Tailwind CSS を利用する

本記事は自分用の最低限の備忘です。

npm run develop で開発を進める上では今のところ特に問題が発生していないのですが、その先（SSG後のソースなど）では不具合など出る可能性もありますので、参考にされる際は自己責任でお願いします。

参考：https://tailwindcss.com/docs/guides/nextjs

この記事の前提

Next.js 13 + TypeScript + Tailwind CSS 環境を新規に構築する
グローバルな Layout コンポーネントに Tailwind CSS を読み込む
- これにより、子ページも含めて全てのページに Tailwind CSS が当たっている状態にする
Next.js 13 で導入された app ディレクトリを採用した構成とする
- つまり pages ディレクトリは使用しない

Next.js with TypeScript のインストール

TypeScript を有効化して Next Project を作成する。
3つ質問されるので、全て Yes を選択する。

$ npx create-next-app app --ts
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Would you like to use experimental `app/` directory with this project? … Yes

Tailwind CSS の動作に必要なライブラリ一式を追加する。

$ cd app
$ npm install -D tailwindcss postcss autoprefixer

以下コマンドで postcss.config.js および tailwind.config.js を生成

$ npx tailwindcss init -p

pages ディレクトリを削除（ app ディレクトリを使用するため）

$ rm -rf pages

Tailwind CSS の適用

以下のように tailwind.config.js を変更する。

tailwind.config.js

  /** @type {import('tailwindcss').Config} */
  module.exports = {
-   content: [],
+   content: [
+     './src/app/**/*.{js,ts,jsx,tsx}',
+   ],
+   mode: 'jit',
+   purge: [
+     './src/app/**/*.{js,ts,jsx,tsx}'
+   ],   
    theme: {
      extend: {},
    },
    plugins: [],
}

src/app/test/page.tsx を以下の内容で新規作成する。これは Tailwind CSS が適用されているかを確認するためのページとなる。

src/app/test/page.tsx

import { Inter } from '@next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function Test() {
  return (
    <>
      <h1 className="text-sm font-bold underline">
        Hello world with Tailwind CSS!
      </h1>
    </>
  )
}

ここから先は、2つのやり方があるので、 A か B のいずれか片方だけを行う。

A. 任意のディレクトリに tailwind.css を作成し、それを import する

こちらのほうが、のちに紹介する B のやり方よりも少しだけ手数が多い。しかし、のちのち @apply や @layer などのオリジナルクラス作成などを視野に入れる場合、作成した tailwind.css にそれらの設定を追記していけるため、こちらのやり方をしておいたほうがよい。

src/app/tailwind.css を作成し、以下の内容を書く

src/app/tailwind.css

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

src/app/layout.tsx に以下の1行を追加する

src/app/layout.tsx

  import './globals.css'
+ import './tailwind.css'

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">
        {/*
          <head /> will contain the components returned by the nearest parent
          head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
        */}
        <head />
        <body>{children}</body>
      </html>
    )
  }

B. node_modules の tailwind.css を import する

こちらのほうが手数が少なくて済む。しかし、個人的には、ハンズオンで終わるつもりがないプロジェクトであれば A のやり方を採用しておくほうが良い・・・と思う。

こちらのやり方をこの記事に記載しているのは、こちらのやり方でもうまくいった、ということを備忘として残しておく以上の意味はない。

src/app/layout.tsx に以下の1行を追加する

src/app/layout.tsx

  import './globals.css'
+ import 'tailwindcss/tailwind.css'

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">
        {/*
          <head /> will contain the components returned by the nearest parent
          head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
        */}
        <head />
        <body>{children}</body>
      </html>
    )
  }

ローカル環境を起動して動作確認

以下のコマンドを実行することで、ローカル環境が起動する。

$ npm i
$ npm run develop

続けて、以下URLにアクセスしてみる。

http://localhost:3000/test

この時、表示される Hello world with Tailwind CSS! という文字が　「小さな文字である」「下線が引かれている」「太字である」という状態ならば、 Tailwind CSS が当たっている状態と言える。