fix(module): Nuxt 2 support (#508)

Author: Tahul

nuxt2-playground/README.md

@@ -0,0 +1,22 @@
+# codesandbox-nuxt-tailwindcss
+
+> Nuxt starter for CodeSandBox with TailwindCSS
+
+## Build Setup
+
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+# generate static project
+$ yarn run generate
+```
+
+For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

nuxt2-playground/components/TButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <button class="btn btn-blue">
+    <slot>Button</slot>
+  </button>
+</template>
+
+<style lang="postcss" scoped>
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+  &.btn-blue {
+    @apply bg-blue-500 text-white;
+    &:hover {
+      @apply bg-blue-700;
+    }
+  }
+}
+</style>

nuxt2-playground/layouts/default.vue

@@ -0,0 +1,21 @@
+<template>
+  <nuxt class="mx-auto p-4" />
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Nuxt.js with TailwindCSS',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      {
+        hid: 'description',
+        name: 'description',
+        content: 'Nuxt.js with TailwindCSS example'
+      }
+    ],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+  }
+}
+</script>

nuxt2-playground/nuxt.config.js

@@ -0,0 +1,11 @@
+import localModule from '../src/module'
+
+export default {
+  /*
+   ** Nuxt.js modules
+   */
+  buildModules: [
+    // Doc: https://github.com/nuxt-community/tailwindcss-module
+    localModule
+  ]
+}

nuxt2-playground/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt-dark-tailwindcss",
+  "version": "1.0.0",
+  "description": "Nuxt.js example with @nuxtjs/color-mode and @nuxtjs/tailwindcss module.",
+  "author": "Atinux",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "nuxt": "2.15.8",
+    "postcss": "8.4.14"
+  },
+  "keywords": []
+}

nuxt2-playground/pages/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="max-w-sm rounded overflow-hidden shadow-lg mb-4">
+      <div class="px-6 py-4 pb-2">
+        <div class="text-customcolor">
+          this text is a custom red color
+        </div>
+      </div>
+      <div class="px-6 py-4">
+        <span class="badge mr-2">this is red in css using apply</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.badge {
+  @apply text-customcolor;
+}
+</style>

nuxt2-playground/sandbox.config.json

@@ -0,0 +1,8 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "container": {
+    "node": "14"
+  }
+}

nuxt2-playground/tailwind.config.js

@@ -0,0 +1,9 @@
+/*
+ ** TailwindCSS Configuration File
+ **
+ ** Docs: https://tailwindcss.com/docs/configuration
+ ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+ */
+module.exports = {
+  theme: { extend: { colors: { customcolor: '#FF0000' } } }
+}

nuxt2-playground/yarn.lock

@@ -19,6 +19,7 @@
     "build": "nuxt-module-build",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "dev": "nuxt dev playground",
+    "dev:nuxt2": "nuxt dev nuxt2-playground",
     "lint": "eslint --ext .js,.ts,.vue",
     "prepack": "yarn build",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",

package.json

@@ -2,7 +2,7 @@ import { defineNuxtConfig } from 'nuxt'
 import tailwindModule from '../src/module'
 
 export default defineNuxtConfig({
-  extends: ['./theme'],
+  // extends: ['./theme'],
   modules: [
     '@nuxt/content',
     tailwindModule

playground/nuxt.config.ts

@@ -12,7 +12,8 @@ import {
   createResolver,
   resolvePath,
   addVitePlugin,
-  tryRequireModule
+  tryRequireModule,
+  isNuxt3
 } from '@nuxt/kit'
 import { Config } from 'tailwindcss'
 import { name, version } from '../package.json'
@@ -77,14 +78,14 @@ export default defineNuxtModule<ModuleOptions>({
      */
     const addConfigPath = async (path: string | string[]) => {
       if (typeof path === 'string') {
-        path = (await resolvePath(path)).split('.').slice(0, -1).join('.')
+        path = (await resolvePath(path, { extensions: ['.js', '.ts'] })).split('.').slice(0, -1).join('.')
         configPaths.push(path)
         return
       }
 
       if (Array.isArray(path)) {
         for (let _path of path) {
-          _path = (await resolvePath(_path)).split('.').slice(0, -1).join('.')
+          _path = (await resolvePath(_path, { extensions: ['.js', '.ts'] })).split('.').slice(0, -1).join('.')
           configPaths.push()
         }
       }
@@ -220,6 +221,7 @@ export default defineNuxtModule<ModuleOptions>({
      */
 
     // Add _tailwind config viewer endpoint
+    // TODO: Fix `addServerHandler` on Nuxt 2 w/o Bridge
     if (nuxt.options.dev && moduleOptions.viewer) {
       const route = '/_tailwind'
       const createServer = await import('tailwind-config-viewer/server/index.js').then(r => r.default || r) as any
@@ -232,7 +234,8 @@ export default defineNuxtModule<ModuleOptions>({
         }
         _viewerDevMiddleware(req, res)
       }
-      addDevServerHandler({ route, handler: viewerDevMiddleware })
+      if (isNuxt3()) { addDevServerHandler({ route, handler: viewerDevMiddleware }) }
+      if (isNuxt2()) { nuxt.options.serverMiddleware.push({ route, handler: viewerDevMiddleware }) }
       nuxt.hook('listen', (_, listener) => {
         const viewerUrl = `${withoutTrailingSlash(listener.url)}${route}`
         logger.info(`Tailwind Viewer: ${chalk.underline.yellow(withTrailingSlash(viewerUrl))}`)