fix: enable Tailwind with storybook (#15418)

jaaydenh · spikecurtis · BrunoQuaresma · web-flow · commit de2f42eedd2a · 2024-11-07T20:56:42.000-05:00
This adds index.css to the storybook preview file and references to
#storybook-root element in the tailwind config

---------

Co-authored-by: Spike Curtis &lt;spike@coder.com&gt;
Co-authored-by: BrunoQuaresma &lt;bruno_nonato_quaresma@hotmail.com&gt;
diff --git 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
@@ -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"],
