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

* feat: tailwindcss viewer in devtools * refactor: ts missing error
nuxt-modules · Feb 11, 2023 · c46c834 · c46c834
1 parent 0c5e073
commit c46c834
Show file tree

Hide file tree

Showing 4 changed files with 424 additions and 4 deletions.
diff --git a/package.json b/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",

diff --git a/playground/nuxt.config.ts b/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,

diff --git a/src/module.ts b/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/'
+          }
+        })
+      })
+    }
   }
+
 })