Next.jsで、taiwind cssが使えない

現在Next.js(TypeScript)上にtaiwind cssを導入したいと考えています。

Github https://github.com/takoyan33/next-ts

その際に、こちらのサイトを参考にしました。
https://tailwindcss.com/docs/guides/nextjs

ですが、ローカルで確認すると、エラーは起きませんでしたが、反映されていませんでした。
Next.jsだと反映されるのですが、TypeScriptを導入すると反映されなくなった感じです。
何かわかる方がいればよろしくお願いします。

JavaScript
#index.tsx
import Head from "next/head";
import Layout, { siteTitle } from "../components/layout";
import utilStyles from "../styles/utils.module.css";
import { getSortedPostsData } from "../lib/posts";
import Link from "next/link";
import Date from "../components/date";

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p className="text-red-400">API図鑑</p>
        <p>このサイトでは、様々なapiの使い方を学ぶことができます。</p>

        <Link href="resas">Resas API編</Link>
        <br></br>
        <Link href="spotify">Spotify API編</Link>
        <br></br>
        <Link href="resas">Line API編</Link>
        <br></br>
      </section>
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>ブログ</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              <Link href={`/posts/${id}`}>
                <a>{title}</a>
              </Link>
              <br />
              <small className={utilStyles.lightText}>
                <Date dateString={date} />
              </small>
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

JavaScript
#tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};