Tailwind CSS 暗黑模式不生效，疑似配置问题求助

各位大佬好！我最近在配置Next.js项目的Tailwind暗黑模式时遇到了麻烦，按照官方文档的手动模式配置后，即使在<html>标签上加上了dark类，页面依然显示白色背景，dark:前缀的样式完全不生效，折腾了好几种方法都没解决，来求助大家！

我的配置细节 #

全局CSS（global.css）

我按照文档添加了自定义变体：

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

Next.js RootLayout 代码

我已经在根布局的<html>标签上明确加了dark类，并且给<body>设置了dark:text-white dark:bg-black：

import './global.css'
import type { Metadata } from 'next'
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'
import { Navbar } from './components/nav'
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'
import Footer from './components/footer'
import { baseUrl } from './sitemap'

export const metadata: Metadata = {
  metadataBase: new URL(baseUrl),
  title: {
    default: 'Next.js Portfolio Starter',
    template: '%s | Next.js Portfolio Starter',
  },
  description: 'This is my portfolio.',
  openGraph: {
    title: 'My Portfolio',
    description: 'This is my portfolio.',
    url: baseUrl,
    siteName: 'My Portfolio',
    locale: 'en_US',
    type: 'website',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

const cx = (...classes) => classes.filter(Boolean).join(' ')

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className='dark' >
      <body className="dark:text-white dark:bg-black antialiased max-w-3xl mx-4 mt-8 flex justify-center lg:mx-auto">
        <main className="flex-auto min-w-0 mt-6 flex flex-col px-2 md:px-0">
          <Navbar />
          {children}
          <Footer />
          <Analytics />
          <SpeedInsights />
        </main>
      </body>
    </html>
  )
}

项目依赖（package.json）

用的是Tailwind v4的alpha版本和Next.js的canary版本：

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@tailwindcss/postcss": "4.0.0-alpha.13",
    "@types/node": "20.11.17",
    "@types/react": "18.2.55",
    "@types/react-dom": "18.2.19",
    "@vercel/analytics": "^1.1.3",
    "@vercel/speed-insights": "^1.0.9",
    "geist": "1.2.2",
    "next": "canary",
    "next-mdx-remote": "^4.4.1",
    "postcss": "^8.4.35",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sugar-high": "^0.6.0",
    "tailwindcss": "4.0.0-alpha.13",
    "typescript": "5.3.3"
  }
}

我已经尝试过的方法 #

• 配置tailwind.config.js来启用暗黑模式（手动模式）
• 使用文档里的自定义变体@custom-variant dark (&:where(.dark, .dark *))

但不管哪种方法，页面背景还是白色，dark:的样式完全没生效，我本来预期只要加了dark类，对应的暗黑样式就会自动触发，现在完全没反应。有没有大佬能帮忙排查下问题出在哪？

内容来源于stack exchange