feat: integrate tailwind-config-viewer (#232)

* feat: integrate tailwind-config-viewer

* feat: add viewer option and only run viewer in dev mode

* chore: improvements

* chore: ignore code for dev

* docs: add viewer

* docs: add video

* chore: ignore serverMiddleware

* chore: fix yarn.lock

Co-authored-by: Sébastien Chopin <[email protected]>

Author: rogden

docs/content/en/examples/basic.md

@@ -2,7 +2,7 @@
 title: Basic Usage Example
 menuTitle: Basic Usage
 description: 'Live example of basic usage of Nuxt TailwindCSS on CodeSandbox.'
-position: 5
+position: 6
 category: Examples
 csb_link: https://codesandbox.io/embed/nuxt-tailwindcss-o4vn5pvp7q
 fullscreen: true

docs/content/en/examples/dark-mode.md

@@ -2,7 +2,7 @@
 title: Dark Mode Example
 menuTitle: Dark Mode
 description: 'Live example of dark mode with Nuxt TailwindCSS on CodeSandbox.'
-position: 6
+position: 7
 category: Examples
 csb_link: https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j
 fullscreen: true

docs/content/en/examples/tailwindui.md

@@ -2,7 +2,7 @@
 title: Tailwind UI Example
 menuTitle: Tailwind UI
 description: 'Live example of Tailwind UI plugin with Nuxt on CodeSandbox.'
-position: 7
+position: 8
 category: Examples
 csb_link: https://codesandbox.io/embed/nuxt-tailwindui-xy1jk
 fullscreen: true

docs/content/en/index.md

@@ -11,14 +11,20 @@ categoryPosition: 1
 
 Add [Tailwind CSS](https://tailwindcss.com) to your [Nuxt](https://nuxtjs.org) application in seconds.
 
+<alert type="info">
+
+This module default to Tailwind v1, please look at [these instructions](/setup#tailwind-2) to upgrade to Tailwind v2.
+
+</alert>
+
 ## Features
 
 - 👌&nbsp; Zero configuration to start
 - ⚡️&nbsp; PurgeCSS included for minimal CSS ⚡️
 - 🪄&nbsp; Use latest CSS features *([Stage 1](https://cssdb.org/#stage-1))*
-- 🎨&nbsp; Discover your Tailwind Colors *([see video](/#tailwind-colors))*
-- ⚙️&nbsp; Reference your Tailwind config in your app 
+- 🎨&nbsp; Discover your Tailwind configuration *([see video](/#tailwind-colors))*
 - 📦&nbsp; Extendable by [Nuxt modules](https://modules.nuxtjs.org/)
+- ⚙️&nbsp; Reference your Tailwind config in your app 
 
 <p class="flex items-center">Enjoy a documentation with light and dark mode:&nbsp;<app-color-switcher class="flex"></app-color-switcher></p>
 
@@ -32,10 +38,12 @@ Add [Tailwind CSS](https://tailwindcss.com) to your [Nuxt](https://nuxtjs.org) a
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1596625297/nuxt-tailwindcss_ipv0ta.ogv" type="video/ogg" />
 </video>
 
-### Tailwind Colors
+### Tailwind Viewer
 
-<video poster="https://res.cloudinary.com/nuxt/video/upload/v1606994332/nuxt-tailwind-colors_qlio2t.jpg" loop playsinline controls>
-  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1606994332/nuxt-tailwind-colors_qlio2t.webm" type="video/webm" />
-  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1606994332/nuxt-tailwind-colors_qlio2t.mp4" type="video/mp4" />
-  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1606994332/nuxt-tailwind-colors_qlio2t.ogv" type="video/ogg" />
+<video poster="https://res.cloudinary.com/nuxt/video/upload/v1608225750/nuxt-tailwind-viewer_ktowjm.jpg" loop playsinline controls>
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.webm" type="video/webm" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.mp4" type="video/mp4" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.ogv" type="video/ogg" />
 </video>
+
+Learn more about the [Tailwind viewer](/tailwind-viewer).

docs/content/en/options.md

@@ -1,7 +1,7 @@
 ---
 title: Options
 description: 'You can configure the module easily with the tailwindcss property.'
-position: 4
+position: 5
 category: Guide
 categoryPosition: 2
 ---
@@ -101,3 +101,26 @@ export default {
 ```
 
 Learn more about overwriting Tailwind config [here](/tailwind-config).
+
+## `viewer`
+
+- Default: `true` in development
+- Version: <badge>v3.4+</badge>
+
+<alert type="info">
+
+The [Tailwind viewer](/tailwind-viewer) is only available in development with `nuxt dev`.
+
+</alert>
+
+The module internally use [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) to setup the `/_tailwind/` route.
+
+To disable the viewer in development, set it to `false`:
+
+```js{}[nuxt.config.js]
+export default {
+  tailwindcss: {
+    viewer: false
+  }
+}
+```

docs/content/en/setup.md

@@ -101,7 +101,6 @@ We have seen an issue with NPM regarding the packages resolution (see [comment](
 
 </alert>
 
-
 ### Tailwind 1
 
 When a new version of Tailwind CSS is released, you don't need to wait for this module to upgrade, you can directly upgrade your dependencies.

docs/content/en/tailwind-viewer.md

@@ -0,0 +1,23 @@
+---
+title: Tailwind Viewer
+description: 'Visualize your Tailwind configuration with the viewer.'
+position: 4
+category: Guide
+categoryPosition: 2
+---
+
+Nuxt Tailwind will expose a `/_tailwind/` route in development so you can quickly visualize your tailwind configuration with easy copy pasting, thanks to the awesome [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) package ✨
+
+The viewer is available from the `v3.4.0` of `@nuxtjs/tailwindcss`.
+
+<video poster="https://res.cloudinary.com/nuxt/video/upload/v1608225750/nuxt-tailwind-viewer_ktowjm.jpg" loop playsinline controls>
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.webm" type="video/webm" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.mp4" type="video/mp4" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.ogv" type="video/ogg" />
+</video>
+
+When enabled, you will see the Tailwind viewer url in your terminal:
+
+<img src="/tailwind-viewer.png" width="530" height="246" style="margin: 0;" />
+
+Checkout the [viewer option](/options#viewer) to disable the viewer in development.