feat: automatic integration with @nuxtjs/tailwindcss (#237)

nuxt-modules · Apr 11, 2024 · 7e4db61 · 7e4db61
1 parent 9c80869
commit 7e4db61
Show file tree

Hide file tree

Showing 10 changed files with 764 additions and 578 deletions.
diff --git 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 `<html>` 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
@@ -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"
   }
-}
+}
diff --git a/playground/app.vue b/playground/app.vue
@@ -1,34 +1,5 @@
 <template>
-  <div class="container">
-    <Meta
-      name="description"
-      content="Demo of using @nuxtjs/color-mode for Nuxt, supporting dark mode and custom colors"
-    />
-    <p>
-      <NuxtLogo />
-    </p>
+  <NuxtLayout>
     <NuxtPage />
-    <p class="note">
-      Demo based on <a href="https://color-mode.nuxtjs.org">@nuxtjs/color-mode</a> module.
-    </p>
-  </div>
+  </NuxtLayout>
 </template>
-
-<style>
-p {
-  padding: 20px 0;
-  margin: 0;
-}
-.container {
-  text-align: center;
-  padding: 50px;
-}
-.note {
-  transition: all .3s;
-  display: inline-block;
-  padding: 15px 15px;
-  border-radius: 5px;
-  background-color: var(--bg-secondary);
-  color: var(--color-secondary);
-}
-</style>
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="container">
+    <Meta
+      name="description"
+      content="Demo of using @nuxtjs/color-mode for Nuxt, supporting dark mode and custom colors"
+    />
+    <p>
+      <NuxtLogo />
+    </p>
+    <slot />
+    <p class="note">
+      Demo based on <a href="https://color-mode.nuxtjs.org">@nuxtjs/color-mode</a> module.
+    </p>
+  </div>
+</template>
+
+<style>
+p {
+  padding: 20px 0;
+  margin: 0;
+}
+.container {
+  text-align: center;
+  padding: 50px;
+}
+.note {
+  transition: all .3s;
+  display: inline-block;
+  padding: 15px 15px;
+  border-radius: 5px;
+  background-color: var(--bg-secondary);
+  color: var(--color-secondary);
+}
+</style>
diff --git 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
@@ -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
@@ -8,5 +8,11 @@
         light page
       </NuxtLink>
     </p>
+    <p>
+      Go to
+      <NuxtLink to="/tailwind">
+        tailwind integration
+      </NuxtLink>
+    </p>
   </div>
 </template>
diff --git a/playground/pages/tailwind.vue b/playground/pages/tailwind.vue
@@ -0,0 +1,21 @@
+<script setup>
+definePageMeta({
+  layout: false,
+})
+</script>
+
+<template>
+  <div class="bg-white py-4">
+    <div class="dark:bg-black">
+      <p class="dark:text-white">
+        hello tailwind!
+      </p>
+      <p>
+        <NuxtLink to="/">
+          Home
+        </NuxtLink>
+      </p>
+      <ColorModePicker />
+    </div>
+  </div>
+</template>