fix: enable class-based dark mode in Tailwind v4

claude · claude · commit 35d4220a3ab3 · 2026-03-24T18:53:26.000Z
Tailwind v4 defaults to media-query-based dark mode, so `dark:` utilities only respond to `prefers-color-scheme`. Our useTheme hook toggles the `.dark` class on <html>, which requires the selector strategy. Add `@custom-variant dark` to globals.css so both Tailwind utilities (dark:bg-*) and custom CSS selectors (.dark .cept-*) work with the class toggle. https://claude.ai/code/session_01QddASAFJgFoPPTDS88nkq2
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));
 @source "../";
 @source "../../../web/src";
 @import '../components/editor/editor-styles.css';

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@import 'tailwindcss';`
	`2`	`+@custom-variant dark (&:where(.dark, .dark *));`
`2`	`3`	`@source "../";`
`3`	`4`	`@source "../../../web/src";`
`4`	`5`	`@import '../components/editor/editor-styles.css';`