Skip to content

Commit 255da81

Browse files
authored
docs: update color mode example
1 parent 9b157eb commit 255da81

File tree

1 file changed

+27
-3
lines changed

1 file changed

+27
-3
lines changed

Diff for: docs/content/3.examples/2.dark-mode.md

+27-3
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,32 @@ Live example of dark mode with Nuxt Tailwind on CodeSandbox.
88

99
---
1010

11-
<!-- TODO: Replace with tailwind's native dark mode support. -->
12-
1311
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.
1412

15-
:sandbox{src="https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j"}
13+
To make it work hand-in-hand, you need to update your `tailwind.config` to add
14+
15+
```ts [tailwind.config.ts]
16+
import type { Config } from 'tailwindcss'
17+
18+
export default <Partial<Config>>{
19+
darkMode: 'class'
20+
}
21+
```
22+
23+
And add the `classSuffix` to the colorMode module options:
24+
25+
```ts [nuxt.config.ts]
26+
export default defineNuxtConfig({
27+
modules: [
28+
'@nuxtjs/tailwindcss',
29+
'@nuxtjs/color-mode'
30+
],
31+
colorMode: {
32+
classSuffix: ''
33+
}
34+
})
35+
```
36+
37+
See the working demo below:
38+
39+
:sandbox{src="https://stackblitz.com/edit/nuxt-tailwindcss-color-mode?embed=1&file=app.vue"}

0 commit comments

Comments
 (0)