【Next.js14 + Turbopack】インストール後にTailwind CSSを導入する手順

はじめに

Turbopackを利用してNext.jsをインストールすると、別途Tailwind cssをインストールする必要があります。
これからご紹介する手順を忘れるとTailwind cssが効かず時間を潰すことになるので、ここにまとめておきます。

Next.jsをインストール

Turbopackを使用してNext.jsをインストールします

$ npx create-next-app --ts --example with-turbopack

作成されたディレクトリに移動して以下のコマンドを実行します。
①依存関係をインストールします。

npm install

②開発サーバーを起動します。

npm run dev

Hello, Next.js!が画面上に表示されればNext.jsのインストール作業は成功です。

Tailwind cssをインストール

以下のコマンドを同じディレクトリ内で実行します。

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

ここで注意なのですが、上記コマンド実行後に「postcss.config.js」がきちんと生成されているか確認してください。
もしpostcss.config.jsがない場合は、この後の作業をしてもtailwindが適用されないです。

きちんとpostcss.config.jsの生成が確認できたら、tailwin.configを以下のように編集します。

/** @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: {},
  },
}

この部分は公式サイトに詳細ありますので、参考にしてみてください

tailwin.configの編集が終わったらglobals.cssファイルをappディレクトリ配下に作成します。

その中に以下を記載します。

global.css

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

上記のglobal.cssをappディレクトリ配下のlayout.tsxでインポートをします。

page.tsxでtailwindcssを試してみてスタイルが変更されていればTailwind CSSのインストールが成功していることになります。

おわりに

Next.jsのインストールをする時に、tailwind cssをインストールするか質問されて自動インストールされるのですが、turbopackのインストールを行う時には質問がされなかったため別途tailwindのインストールが必要になります。
一つ一つの手順は大変ではないですが、どれか一つの手順が欠けるとエラーも出ず原因がわからないという状態になったので今回まとめておきました。
これから開発を始める方の参考になれば幸いです！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼