Skip to content

Commit

Permalink
docs: update color mode example
Browse files Browse the repository at this point in the history
  • Loading branch information
Atinux committed Jun 13, 2023
1 parent 9b157eb commit 255da81
Showing 1 changed file with 27 additions and 3 deletions.
30 changes: 27 additions & 3 deletions docs/content/3.examples/2.dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,32 @@ Live example of dark mode with Nuxt Tailwind on CodeSandbox.

---

<!-- TODO: Replace with tailwind's native dark mode support. -->

Example with the [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) plugin and [@nuxtjs/color-mode](https://github.com/nuxt-community/color-mode-module) module.

:sandbox{src="https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j"}
To make it work hand-in-hand, you need to update your `tailwind.config` to add

```ts [tailwind.config.ts]
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
darkMode: 'class'
}
```

And add the `classSuffix` to the colorMode module options:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss',
'@nuxtjs/color-mode'
],
colorMode: {
classSuffix: ''
}
})
```

See the working demo below:

:sandbox{src="https://stackblitz.com/edit/nuxt-tailwindcss-color-mode?embed=1&file=app.vue"}

0 comments on commit 255da81

Please sign in to comment.