From e5c545f09f33e3a93c6f96935850095c9252b501 Mon Sep 17 00:00:00 2001
From: Tobias Maier <me@tobiasmaier.dev>
Date: Thu, 2 May 2024 11:23:57 +0200
Subject: [PATCH] docs: update docs on how to use with tailwindcss >3.4.1

---
 next-themes/README.md | 40 +++++++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/next-themes/README.md b/next-themes/README.md
index 0f980031..ffda06b9 100644
--- a/next-themes/README.md
+++ b/next-themes/README.md
@@ -452,36 +452,62 @@ export default ThemedImage
 }
 ```
 
-### With Tailwind
+### With TailwindCSS
 
 [Visit the live example](https://next-themes-tailwind.vercel.app) • [View the example source code](https://github.com/pacocoursey/next-themes/tree/master/examples/tailwind)
 
 > NOTE! Tailwind only supports dark mode in version >2.
 
-In your `tailwind.config.js`, set the dark mode property to class:
+In your `tailwind.config.js`, set the dark mode property to `selector`:
 
 ```js
 // tailwind.config.js
 module.exports = {
-  darkMode: 'class'
+  darkMode: 'selector'
 }
 ```
 
+_Note: If you are using an older version of tailwindcss < 3.4.1 use `'class'` instead of `'selector'`_
+
 Set the attribute for your Theme Provider to class:
 
-```jsx
-// pages/_app.js
+```tsx
+// pages/_app.tsx
 <ThemeProvider attribute="class">
 ```
 
-If you're using the `value` prop to specify different attribute values, make sure your dark theme explicitly uses the "dark" value, as required by Tailwind.
+If you're using the value prop to specify different attribute values, make sure your dark theme explicitly uses the "dark" value, as required by Tailwind.
 
 That's it! Now you can use dark-mode specific classes:
 
-```jsx
+```tsx
 <h1 className="text-black dark:text-white">
 ```
 
+#### Using a custom selector (tailwindcss > 3.4.1)
+
+Tailwind also allows you to use a [custom selector](https://tailwindcss.com/docs/dark-mode#customizing-the-selector) for dark-mode as of v3.4.1.
+
+In that case, your `tailwind.config.js` would look like this:
+
+```js
+// tailwind.config.js
+module.exports = {
+  // data-mode is used as an example, next-themes supports using any data attribute
+  darkMode: ['selector', '[data-mode="dark"]']
+  …
+}
+```
+
+Now set the attribute for your ThemeProvider to `data-mode`:
+
+```tsx
+// pages/_app.tsx
+<ThemeProvider attribute="data-mode">
+```
+
+With this setup, you can now use Tailwind's dark mode classes, as in the previous example:
+
 ## Discussion
 
 ### The Flash