feat: Adding Tailwind Viewer to Nuxt dev tools (#612)

* feat: tailwindcss viewer in devtools

* refactor: ts missing error

Author: claranceliberi

package.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@fontsource/inter": "^4.5.15",
     "@nuxt/content": "^2.4.0",
+    "@nuxt/devtools": "^0.1.0",
     "@nuxt/module-builder": "latest",
     "@nuxt/test-utils": "^3.1.1",
     "@nuxtjs/eslint-config-typescript": "latest",

playground/nuxt.config.ts

@@ -2,7 +2,8 @@ export default defineNuxtConfig({
   extends: ['./theme'],
   modules: [
     '@nuxt/content',
-    '../src/module'
+    '../src/module',
+    '@nuxt/devtools'
   ],
   tailwindcss: {
     exposeConfig: true,

src/module.ts

@@ -314,5 +314,21 @@ export default defineNuxtModule<ModuleOptions>({
         logger.info(`Tailwind Viewer: ${chalk.underline.yellow(withTrailingSlash(viewerUrl))}`)
       })
     }
+
+    if (nuxt.options.dev) {
+      // @ts-expect-error missing type
+      nuxt.hook('devtools:customTabs', (tabs) => {
+        tabs.push({
+          title: 'TailwindCSS',
+          name: 'tailwindcss',
+          icon: 'logos-tailwindcss-icon',
+          view: {
+            type: 'iframe',
+            src: '/_tailwind/'
+          }
+        })
+      })
+    }
   }
+
 })