Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update docs on how to use with tailwindcss >3.4.1 #290

Merged
merged 2 commits into from
Nov 4, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 33 additions & 7 deletions next-themes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -454,36 +454,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
Expand Down
Loading