feat: integrate tailwind-config-viewer

lib/module.js

@@ -67,28 +67,6 @@ module.exports = async function (moduleOptions) {
       postcss.plugins.tailwindcss = tailwindConfig
     }
 
-    /*
-    ** Add /_tailwind UI
-    */
-    /* istanbul ignore if */
-    if (nuxt.options.dev) {
-      // add layout
-      const layout = resolve(__dirname, 'ui', 'layouts', 'tw.vue')
-      this.addLayout(layout, 'tw')
-      // add page
-      const page = resolve(__dirname, 'ui', 'pages', 'index.vue')
-
-      // register page
-      this.extendRoutes((routes) => {
-        routes.unshift({
-          name: '_tailwind',
-          path: '/_tailwind',
-          component: page
-        })
-      })
-      const url = nuxt.server.listeners && nuxt.server.listeners[0] ? nuxt.server.listeners[0].url : '/'
-      logger.info(`Tailwind Colors available on ${url}_tailwind`)
-    }
     /*
     ** Expose resolved tailwind config as an alias
     ** https://tailwindcss.com/docs/configuration/#referencing-in-javascript
@@ -123,6 +101,18 @@ module.exports = async function (moduleOptions) {
       }
     }
   })
+
+  /*
+   ** Add /_tailwind UI
+   */
+  const tailwindConfigViewer = require('./serverMiddleware/tailwindConfigViewer')
+  tailwindConfigViewer({
+    path: '_tailwind',
+    tailwindConfig,
+    addServerMiddleware: this.addServerMiddleware
+  })
+  const url = nuxt.server.listeners && nuxt.server.listeners[0] ? nuxt.server.listeners[0].url : '/'
+  logger.info(`Tailwind Config Viewer available on ${url}_tailwind/`)
 }
 
 module.exports.meta = require('../package.json')

lib/serverMiddleware/tailwindConfigViewer.js

@@ -0,0 +1,30 @@
+const createServer = require('tailwind-config-viewer/server')
+
+module.exports = ({ path, tailwindConfig, addServerMiddleware }) => {
+  // strip initial and trailing slash from path
+  path = path.replace(/(^\/|\/$)/g, '').replace(/^\//)
+
+  /**
+   * Force redirect if requested path does not have trailing slash.
+   * This is required for relative asset paths in the Tailwind
+   * Config Viewer to load correctly.
+   */
+  addServerMiddleware({
+    path,
+    handler: (req, res, next) => {
+      if (req.originalUrl === `/${path}`) {
+        res.writeHead(301, { Location: `${path}/` })
+        res.end()
+      } else {
+        next()
+      }
+    }
+  })
+
+  addServerMiddleware({
+    path,
+    handler: createServer({
+      tailwindConfigProvider: () => tailwindConfig
+    }).asMiddleware()
+  })
+}

package.json

@@ -28,6 +28,7 @@
     "consola": "^2.15.0",
     "defu": "^3.2.2",
     "fs-extra": "^9.0.1",
+    "tailwind-config-viewer": "^1.3.1",
     "tailwindcss": "^1.9.6"
   },
   "devDependencies": {