Next.jsにTailwindcssを導入する

Next.jsにTaillwindowの導入方法。

基本的に公式サイトを見ればいけるが初歩的なところでミスったのでメモで残しておこうと思う。
https://tailwindcss.com/docs/guides/nextjs

1.下記のコマンドを実行

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.下記のコマンドを実行して、tailwind.config.js と postcss.config.jsファイルを作成する。
tailwind.config.jsにオリジナルのカスタマイズを記載する。

npx tailwindcss init -p

3.tailwind.config.jsのpurgeを下記に変更する。

  module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

4../styles/globals.cssを下記に変更

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

5.pages/_app.jsにimportを追記

//追加
import '../styles/globals.css'

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

export default MyApp

導入した際に起こったエラー

./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages/index.js

エラーの内容はカスタム<App>以外のファイルからグローバルCSSをインポートすることはできませんということだった。
要は_app.js以外のファイルでimport '../styles/globals.css'しちゃダメだよと言っている。
index.jsxにもimport '../styles/globals.css'を記載していたので、上記のエラーが出てしまっていた。

ちゃんとドキュメントを読むことを意識しないとな〜。