【よくある】next.jsでtailwindが効かない

はじめに

個人開発を始めようと思い、next.jsとtailwindで実装を試みました。

ですが、tailwindが効かない。。。

なぜだと思い、google先生に聞いたところ
同じところでハマっている先人たちが多いこと多いこと。

ですが、先人たちの教訓とは別のところで効いていなかったので記事を書きます。

next.jsにtailwindを導入する

Tailwindと必要なパッケージをインストール

npm install -D tailwindcss postcss autoprefixer

しっかりとこの三つをインストールしましょうね

Tailwindの設定ファイルを生成

これによりtailwind.config.jsとpostcss.config.jsが生成されます。

npx tailwindcss init -p

Tailwind の設定を編集

contentオプションにプロジェクトのpagesやcomponentsディレクトリを指定します。
これにより、これらのディレクトリ内のファイルにTailwindのスタイルが適用されるようになります。

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

このcontentの適応範囲が実際とあっていなくて反映しない場合も多いみたいですよ

グローバル CSS に Tailwind を適用

styles/globals.cssにTailwindの基本スタイルをインポートします。
以下のコードをglobals.cssに追加します。

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

_app.js の設定

Next.jsでは、_app.jsファイルでグローバルなCSSをインポートする必要があります。

pages/_app.js

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

自分はこの_app.jsの設定ができていなくて失敗していました！

最後に

色んな先人たちが失敗してますが、以外に自分と全く同じ失敗を見つけるのは難しいですね。