diff --git a/docs/content/1.index.md b/docs/content/1.index.md
index 8822d4e5..d1223182 100644
--- a/docs/content/1.index.md
+++ b/docs/content/1.index.md
@@ -15,6 +15,7 @@ Dark and Light mode with auto detection made easy with Nuxt 🌗
- Add `.${color}-mode` class to `` for easy CSS theming
- Force a page to a specific color mode (perfect for incremental development)
- Works with client-side and universal rendering
+- Works out of the box with [@nuxtjs/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
- Auto detect system [color-mode](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)
- Supports IE9+ 👴
@@ -39,7 +40,10 @@ Then, add `@nuxtjs/color-mode` to the `modules` section of your `nuxt.config.ts`
```ts [nuxt.config.ts]
export default defineNuxtConfig({
- modules: ['@nuxtjs/color-mode']
+ modules: [
+ '@nuxtjs/color-mode'
+ // '@nuxtjs/tailwindcss'
+ ]
})
```
@@ -163,27 +167,6 @@ Props:
- `placeholder`: `String`
- `tag`: `String`, default: `'span'`
-## TailwindCSS
-
-Tailwind v2 introduced [dark mode](https://tailwindcss.com/docs/dark-mode), in order to work with `@nuxtjs/color-mode`, you need to set `darkMode: 'class'` in your `tailwind.config.js`:
-
-```js [tailwind.config.js]
-module.exports = {
- darkMode: 'class'
-}
-```
-
-Then in your `nuxt.config.ts`, set the `classSuffix` option to an empty string:
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
- modules: ['@nuxtjs/color-mode'],
- colorMode: {
- classSuffix: ''
- }
-})
-```
-
## Migrating to v3
v3 of `@nuxtjs/color-mode` requires either Nuxt Bridge or Nuxt 3. (If you are using Nuxt 2 without Bridge, you should continue to use v2.)
diff --git a/package.json b/package.json
index a88a455d..a9ca701f 100755
--- a/package.json
+++ b/package.json
@@ -39,7 +39,9 @@
},
"dependencies": {
"@nuxt/kit": "^3.11.2",
- "pathe": "^1.1.2"
+ "pathe": "^1.1.2",
+ "pkg-types": "^1.0.3",
+ "semver": "^7.6.0"
},
"devDependencies": {
"@commitlint/cli": "^19.2.1",
@@ -58,4 +60,4 @@
"vitest": "^1.4.0",
"@nuxt/eslint-config": "^0.3.5"
}
-}
\ No newline at end of file
+}
diff --git a/playground/app.vue b/playground/app.vue
index 9e1013e8..f8eacfa7 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,34 +1,5 @@
-
+
-
-
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
new file mode 100644
index 00000000..75b2d8f4
--- /dev/null
+++ b/playground/layouts/default.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index c401b2bb..7154b341 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,5 +1,5 @@
export default defineNuxtConfig({
components: { global: true, dirs: ['~/components'] },
css: ['~/assets/main.css'],
- modules: ['../src/module'],
+ modules: ['../src/module', '@nuxtjs/tailwindcss'],
})
diff --git a/playground/package.json b/playground/package.json
index 07c328f7..bca66f6f 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -3,6 +3,7 @@
"private": true,
"dependencies": {
"@nuxtjs/color-mode": "latest",
+ "@nuxtjs/tailwindcss": "^6.11.4",
"nuxt": "^3.11.2"
}
}
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 7d8cf9cb..422b68d3 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -8,5 +8,11 @@
light page
+
+ Go to
+
+ tailwind integration
+
+
diff --git a/playground/pages/tailwind.vue b/playground/pages/tailwind.vue
new file mode 100644
index 00000000..d434ae88
--- /dev/null
+++ b/playground/pages/tailwind.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ hello tailwind!
+
+
+
+ Home
+
+
+
+
+