Next.jsで作成したブログの記事投稿でマークダウンで記述した文字にTailwindのダークモードが適用されません。

前提・実現したいこと

非エンジニアですが、HTML,CSS,JavaScript,TypeScript,React,Next.jsを勉強、練習したくNext.jsのチュートリアルに沿ってブログを作成し、Tailwind で装飾をしました。

記事投稿にはマークダウン記法で投稿をしているのですが、うまく反映されるものと反映されないものが出てしまいます。
Tailwindでダークモードを設定していますが、ダークモード時に通常のテキストは白文字になるのですが、マークダウンで書かれた部分はダークモードにしても白文字になりません。

おそらく初歩的なことなのかもしれませんが、ご教示いただけますと幸いです。

発生している問題・エラーメッセージ

エラーメッセージは特にありません。

該当のソースコード

投稿ページのソースコードです。
article内のpostDataでもdark:text-whiteとしているのですが反映されませんでした。

import
1import Head from 'next/head'
2import Date from '../../components/date'
3import { GetStaticProps, GetStaticPaths } from 'next'
4import Layout from '../../components/layout';
5import Link from 'next/link';
6import '@tailwindcss/typography'
7
8
9export default function Post({
10  postData
11}: {
12  postData: {
13    title: string
14    date: string
15    contentHtml: string
16  }
17}) {
18  return (
19    <Layout>
20      <Head>
21        <title>{postData.title}</title>
22      </Head>
23      <article className="prose prose-green dark:prose-dark pt-24">
24      <h1 className="title-font text-xl font-medium text-gray-900 dark:text-white mb-3 py-2 px-4">{postData.title}</h1>
25        <div className="text-gray-500 pb-2 mb-2 px-4">
26          <Date dateString={postData.date} />
27        </div>
28        <div className="px-4 text-gray-900 dark:text-white" dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
29       </article>
30      <p className="text-green-500 font-bold py-10 px-4">
31        <Link href="/">
32          ← Back to home
33        </Link>
34      </p>
35    </Layout>
36  )
37}
38
39export const getStaticPaths: GetStaticPaths = async () => {
40  const paths = getAllPostIds()
41  return {
42    paths,
43    fallback: false
44  }
45}
46
47export const getStaticProps: GetStaticProps = async ({ params }) => {
48  const postData = await getPostData(params.id as string)
49  return {
50    props: {
51      postData
52    }
53  }
54}