diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
index bbe185a75e068..2dbc1308bb733 100644
--- a/site/.storybook/preview.jsx
+++ b/site/.storybook/preview.jsx
@@ -16,6 +16,7 @@
  * Storybook decorator function used to inject baseline data dependencies into
  * our React components during testing.
  */
+import "../src/index.css";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import CssBaseline from "@mui/material/CssBaseline";
 import {
@@ -134,6 +135,12 @@ function withTheme(Story, context) {
 	const { themeOverride } = DecoratorHelpers.useThemeParameters();
 	const selected = themeOverride || selectedTheme || "dark";
 
+	// Ensure the correct theme is applied to Tailwind CSS classes by adding the
+	// theme to the HTML class list. This approach is necessary because Tailwind
+	// CSS relies on class names to apply styles, and dynamically changing themes
+	// requires updating the class list accordingly.
+	document.querySelector("html")?.setAttribute("class", selected);
+
 	return (
 		<StrictMode>
 			<StyledEngineProvider injectFirst>
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index b9343b7add92c..7b1c8ad4c1e13 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -5,7 +5,7 @@ module.exports = {
 	},
 	darkMode: ["selector"],
 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-	important: "#root",
+	important: ["#root", "#storybook-root"],
 	theme: {
 		fontSize: {
 			"2xs": ["0.626rem","0.875rem"],