tailwindcss暗色主题切换

globals.css:

增加一行代码：@custom-variant dark (&:where(.dark, .dark *));

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));:root {--background: #ffffff;--foreground: #171717;
}@theme inline {--color-background: var(--background);--color-foreground: var(--foreground);--font-sans: var(--font-geist-sans);--font-mono: var(--font-geist-mono);
}@media (prefers-color-scheme: dark) {:root {--background: #0a0a0a;--foreground: #ededed;}
}body {background: var(--background);color: var(--foreground);font-family: Arial, Helvetica, sans-serif;
}

				<div><div className="text-2xl font-medium">主题切换:</div><div className="m-4"><Switch value={isDark} onChange={(e) => handleIsDarkChange(e)} /></div><div className={isDark ? 'dark' : ''}><div className="rounded-lg bg-white px-6 py-8 shadow-xl ring ring-gray-900/5 transition-all duration-500 dark:bg-gray-800"><h3 className="text-base font-medium tracking-tight text-gray-900 dark:text-white">Hello world</h3><p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Hello world</p></div></div></div>

增加样式名dark后，会用自动应用上className中dark:后的样式