tailwind cssが適応されない。

next.jsの環境にtailwindcssを導入しました。
下記のドキュメントを読みながらやりました。事項した手順は下記の通りです。(yarnでインストールしたかったのでnpmではなくyarnでやっています。)
しかしtailwindcssが適応されずスタイルが変わらないです。　わかる人いましたらご教授お願いしたいです。

[手順]
・　yarn add tailwindcss@latest postcss@latest autoprefixer@latestを実行
・　yarn add tailwindcss init -pを実行。　yarn add tailwindcss init -pを実行したがtailwind.config.jsとpostcss.config.jsファイルが作成されなかったのでnpx tailwindcss init -pコマンドで再度実行。(ファイルが作成された)
・_app.tsx①にimport "tailwindcss/tailwind.css";を追加
・tailwind.config.js②に{ colors: { lime: colors.lime } },を追加
・index.tsx③にbg-lime-800 text-whiteを追加

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

①_app.tsx

import "tailwindcss/tailwind.css";

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

export default MyApp;

②tailwind.config.js

const colors = require("tailwindcss/colors");
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: { colors: { lime: colors.lime } },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

③index.tsx

import Head from "next/head";
const Home = () => {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="bg-lime-800 text-white">
        <p>
          Hello
        </p>
      </div>
    </div>
  );
};

export default Home;