From de2f42eedd2ad0352c1960313866658c075c7471 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 7 Nov 2024 20:56:42 -0500 Subject: [PATCH] fix: enable Tailwind with storybook (#15418) This adds index.css to the storybook preview file and references to #storybook-root element in the tailwind config --------- Co-authored-by: Spike Curtis Co-authored-by: BrunoQuaresma --- site/.storybook/preview.jsx | 7 +++++++ site/tailwind.config.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx index bbe185a75e..2dbc1308bb 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 ( diff --git a/site/tailwind.config.js b/site/tailwind.config.js index b9343b7add..7b1c8ad4c1 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"],