From 99f56723755aa04201a016d9a510a2273de1c7bf Mon Sep 17 00:00:00 2001 From: Ayanwunmi Michael Ogaga Date: Sun, 26 Apr 2026 11:23:11 +0100 Subject: [PATCH] tainwind 4+ dark theme docs --- next-themes/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/next-themes/README.md b/next-themes/README.md index 2d6bc5eb..5bc7a86e 100644 --- a/next-themes/README.md +++ b/next-themes/README.md @@ -56,6 +56,17 @@ function MyApp({ Component, pageProps }) { export default MyApp ``` +### With Tailwind 4+ + +If dark mode is malfunctioning in Tailwind CSS v4 or later, you need to explicitly define the dark variant in your global stylesheet. + +To fix this, update your `styles/global.css` file and add: + +```jsx +// styles/global.css +@custom-variant dark (&:where(.dark, .dark *)); +``` + ### With app/ You'll need to update your `app/layout.jsx` to use next-themes. The simplest `layout` looks like this: