nuxt-modules · Dec 14, 2020 · Dec 17, 2020 · Dec 17, 2020 · Dec 17, 2020 · Dec 17, 2020
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -18,7 +18,7 @@ jobs:
         node: [12]
 
     steps:
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.4.0](https://github.com/nuxt-community/tailwindcss-module/compare/v3.3.4...v3.4.0) (2020-12-17)
+
+
+### Features
+
+* integrate tailwind-config-viewer ([#232](https://github.com/nuxt-community/tailwindcss-module/issues/232)) ([cc9fb3f](https://github.com/nuxt-community/tailwindcss-module/commit/cc9fb3f9b793fb7a3a931059ab20388130e137df))
+
 ### [3.3.4](https://github.com/nuxt-community/tailwindcss-module/compare/v3.3.3...v3.3.4) (2020-12-11)
 
 

diff --git a/docs/content/en/examples/basic.md b/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

diff --git a/docs/content/en/examples/dark-mode.md b/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

diff --git a/docs/content/en/examples/tailwindui.md b/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

diff --git a/docs/content/en/index.md b/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).
diff --git a/docs/content/en/options.md b/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
+  }
+}
+```
diff --git a/docs/content/en/setup.md b/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.

diff --git a/docs/content/en/tailwind-viewer.md b/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.
diff --git a/docs/package.json b/docs/package.json
@@ -12,7 +12,7 @@
   "homepage": "https://tailwindcss.nuxtjs.org",
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.8.2",
-    "nuxt": "^2.14.11"
+    "nuxt": "^2.14.12"
   },
   "devDependencies": {
     "nuxt-ackee": "^2.0.0"

diff --git a/docs/static/tailwind-viewer.png b/docs/static/tailwind-viewer.png
Original file line number	Diff line number	Diff line change
		@@ -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.