docs: update nuxt 2.15 & tailwindcss 2.x with typography & dark-mode example

.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 }}
 

CHANGELOG.md

@@ -2,6 +2,52 @@
 
 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.2](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.1...v3.4.2) (2020-12-22)
+
+### [3.4.1](https://github.com/nuxt-community/tailwindcss-module/compare/v3.4.0...v3.4.1) (2020-12-18)
+
+
+### Bug Fixes
+
+* **middleware:** use cjs syntax ([#236](https://github.com/nuxt-community/tailwindcss-module/issues/236)) ([f35b1cc](https://github.com/nuxt-community/tailwindcss-module/commit/f35b1cc44dc9b3d1ff926b7d377d64c354b3697d))
+
+## [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)
+
+
+### Bug Fixes
+
+* addTemplate call compats low version nuxt ([#225](https://github.com/nuxt-community/tailwindcss-module/issues/225)) ([b18380d](https://github.com/nuxt-community/tailwindcss-module/commit/b18380dcd529d679314563f54f66dfe84556767c))
+
+### [3.3.3](https://github.com/nuxt-community/tailwindcss-module/compare/v3.3.2...v3.3.3) (2020-12-04)
+
+### [3.3.2](https://github.com/nuxt-community/tailwindcss-module/compare/v3.3.1...v3.3.2) (2020-12-04)
+
+
+### Bug Fixes
+
+* **lib:** check listeners value before ([431eafc](https://github.com/nuxt-community/tailwindcss-module/commit/431eafcce286317b0efdc1f4f7de303daaf672c9)), closes [#216](https://github.com/nuxt-community/tailwindcss-module/issues/216)
+
+### [3.3.1](https://github.com/nuxt-community/tailwindcss-module/compare/v3.3.0...v3.3.1) (2020-12-03)
+
+
+### Bug Fixes
+
+* handle color as string and smarted light/dark detection ([6058ea8](https://github.com/nuxt-community/tailwindcss-module/commit/6058ea81021b2aee33ed3bb8a262352a3b35414a))
+
+## [3.3.0](https://github.com/nuxt-community/tailwindcss-module/compare/v3.2.0...v3.3.0) (2020-12-02)
+
+
+### Features
+
+* add tailwind colors page ([#215](https://github.com/nuxt-community/tailwindcss-module/issues/215)) ([43db226](https://github.com/nuxt-community/tailwindcss-module/commit/43db226c51bd354ea54bd4638c9da882a1fb9442))
+
 ## [3.2.0](https://github.com/nuxt-community/tailwindcss-module/compare/v3.1.0...v3.2.0) (2020-10-22)
 
 

README.md

@@ -15,11 +15,12 @@
 
 ## Features
 
-- Zero configuration to start
-- PurgeCSS included for minimal CSS
-- Use latest CSS features (Stage 1)
-- Reference your Tailwind config in your app
-- Extendable by Nuxt modules
+- 👌  Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
+- ⚡️  PurgeCSS included for minimal CSS ⚡️
+- 🪄  Use latest CSS features *([Stage 1](https://cssdb.org/#stage-1))*
+- 🎨  Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))*
+- ⚙️  Reference your Tailwind config in your app 
+- 📦  Extendable by [Nuxt modules](https://modules.nuxtjs.org/)
 
 [📖  Read more](https://tailwindcss.nuxtjs.org)
 

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/postcss-plugin.md

@@ -0,0 +1,13 @@
+---
+title: Example with PostCSS Plugins
+menuTitle: PostCSS Plugins
+description: 'Live example of Nuxt Tailwind with postcss-nested plugin'
+position: 9
+category: Examples
+csb_link: https://codesandbox.io/embed/postcss-plugin-with-nuxt-tailwind-gyfo8
+fullscreen: true
+---
+
+Example with [postcss-nested](https://github.com/postcss/postcss-nested) plugin, see [how to add PostCSS plugins](https://nuxtjs.org/faq/postcss-plugins/) in Nuxt.
+
+<code-sandbox :src="csb_link"></code-sandbox>

docs/content/en/examples/tailwind2.md

@@ -0,0 +1,13 @@
+---
+title: Tailwind UI Example
+menuTitle: Tailwind UI with Tailwind 2
+description: 'Live example of Tailwind UI with Typography plugin with Nuxt on CodeSandbox.'
+position: 8
+category: Examples
+csb_link: https://codesandbox.io/embed/tailwind-typography-with-color-mode-4s7i3
+fullscreen: true
+---
+
+Example with [Tailwind UI](https://tailwindui.com) plugin with the [Typography](https://github.com/tailwindlabs/tailwindcss-typography) plugin & [@nuxt/color-mode](https://color-mode.nuxtjs.org/) module.
+
+<code-sandbox :src="csb_link"></code-sandbox>

docs/content/en/examples/tailwindui.md

@@ -2,12 +2,14 @@
 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
 ---
 
 Example with [Tailwind UI](https://tailwindui.com) plugin with the [Inter](https://rsms.me/inter/) font loaded by [@nuxtjs/google-fonts](https://github.com/nuxt-community/google-fonts-module) module.
 
+> Note: Tailwindcss 2.x doesn't require you to have `@tailwind/ui` package installed, checkout the [new demo](/examples/tailwind2) which uses tailwindcss 2.x + tailwindui components
+
 <code-sandbox :src="csb_link"></code-sandbox>

docs/content/en/index.md

@@ -2,31 +2,48 @@
 title: Introduction
 description: 'Add Tailwind CSS to your Nuxt application in seconds.'
 position: 1
-category: ''
+category: 'Getting started'
 categoryPosition: 1
-features:
-  - Zero configuration to start
-  - PurgeCSS included for minimal CSS
-  - Use latest CSS features (Stage 1)
-  - Reference your Tailwind config in your app
-  - Extendable by Nuxt modules
 ---
 
 <img src="/preview.png" class="light-img" />
 <img src="/preview-dark.png" class="dark-img" />
 
 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
 
-<list :items="features"></list>
+- 👌&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 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>
 
-<p class="flex items-center">Enjoy a documentation with light and dark mode:&nbsp;<app-color-switcher class="p-2"></app-color-switcher></p>
+## Videos
 
-## Video
+### Quick start
 
 <video poster="https://res.cloudinary.com/nuxt/video/upload/v1596625297/nuxt-tailwindcss_ipv0ta.jpg" loop playsinline controls>
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1596625297/nuxt-tailwindcss_ipv0ta.webm" type="video/webm" />
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1596625297/nuxt-tailwindcss_ipv0ta.mp4" type="video/mp4" />
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1596625297/nuxt-tailwindcss_ipv0ta.ogv" type="video/ogg" />
 </video>
+
+### Tailwind Viewer
+
+<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,9 +1,8 @@
 ---
 title: Options
 description: 'You can configure the module easily with the tailwindcss property.'
-position: 4
-category: Guide
-categoryPosition: 2
+position: 3
+category: Getting started
 ---
 
 You can configure the module by using the `tailwindcss` property in the `nuxt.config.js`:
@@ -101,3 +100,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

@@ -2,7 +2,7 @@
 title: Setup
 description: 'Using TailwindCSS in your Nuxt project is only one command away'
 position: 2
-category: Guide
+category: Getting started
 ---
 
 Using TailwindCSS in your Nuxt project is only one command away ✨
@@ -44,6 +44,12 @@ That's it! You can now use Tailwind classes in your Nuxt app ✨
 
 </alert>
 
+<alert type="info">
+
+Discover your color palette based on your Tailwind config on `/_tailwind` route.
+
+</alert>
+
 ## Tailwind Files
 
 When running `nuxt dev`, this module will look for these two files:
@@ -77,8 +83,27 @@ See the [module options](/options).
 
 ## Upgrading Tailwind
 
-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.
+### Tailwind 2
+
+Nuxt 2.14 is still using PostCSS 7, we have a [pull request](https://github.com/nuxt/nuxt.js/pull/8346) opened to upgrade the dependencies. Once merged on `v2.15`, we will release a major version of this module to include TailwindCSS 2, see [PR#203](https://github.com/nuxt-community/tailwindcss-module/pull/203).
 
+In the meantime, you can upgrade Tailwind by using the [compatibility build](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build):
+
+```bash
+yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
+```
+
+Please ensure you are using `Node >= 12.13.0` in order to use version 2 of TailwindCSS.
+
+<alert type="warning">
+
+We have seen an issue with NPM regarding the packages resolution (see [comment](https://github.com/nuxt-community/tailwindcss-module/issues/202#issuecomment-738442349)), we highly recommend using [Yarn V1](https://classic.yarnpkg.com/en/docs/install) when working with Nuxt 2.
+
+</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.
 
 <code-group>
   <code-block label="Yarn" active>

docs/content/en/tailwind-config.md

@@ -1,15 +1,15 @@
 ---
 title: Tailwind Config
 description: 'You can configure the integration easily with the storybook property.'
-position: 3
+position: 4
 category: Guide
 ---
 
 `@nuxtjs/tailwindcss` configures the Tailwind configuration to have the best user experience as possible by default.
 
 ## Default Configuration
 
-```js
+```js{}[tailwind.config.js]
 {
   theme: {},
   variants: {},
@@ -79,7 +79,7 @@ Learn more about the [Tailwind config](https://tailwindcss.com/docs/configuratio
 
 You can also use your `nuxt.config.js` to set your Tailwind Config with the `tailwindcss.config` property:
 
-```js{}[nuxt.config.js]
+```js [nuxt.config.js]
 import tailwindTypography from '@tailwindcss/typography'
 
 export default {
@@ -186,6 +186,22 @@ This merging strategy of with a function only applies to `plugins` and `purge.co
 
 </alert>
 
+### Whitelisting classes
+
+If you need to whitelisting classes and avoid purge system, you need to precise `safelist` option like below :
+
+```js{}[tailwind.config.js]
+module.exports = {
+  purge: {
+    options: {
+      // Whitelisting some classes to avoid purge
+      safelist: ['whitelisted']
+    }
+  }
+}
+```
+
+
 ## Referencing in the application
 
 It can often be useful to reference tailwind configuration values in runtime. For example to access some of your theme values when dynamically applying inline styles in a component.

docs/content/en/tailwind-viewer.md

@@ -0,0 +1,23 @@
+---
+title: Tailwind Viewer
+description: 'Visualize your Tailwind configuration with the viewer.'
+position: 5
+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.

docs/nuxt.config.js

@@ -1,10 +1,14 @@
-import theme from '@nuxt/content-theme-docs'
+import { withDocus } from 'docus'
 
-export default theme({
+export default withDocus({
   env: {
     GITHUB_TOKEN: process.env.GITHUB_TOKEN
   },
-  loading: { color: '#38b2ac' },
+  docus: {
+    colors: {
+      primary: '#38b2ac'
+    }
+  },
   buildModules: [
     // https://github.com/bdrtsky/nuxt-ackee
     'nuxt-ackee'

docs/package.json

@@ -11,8 +11,8 @@
   "license": "MIT",
   "homepage": "https://tailwindcss.nuxtjs.org",
   "dependencies": {
-    "@nuxt/content-theme-docs": "^0.7.2",
-    "nuxt": "^2.14.7"
+    "docus": "^0.0.8",
+    "nuxt": "^2.15.0"
   },
   "devDependencies": {
     "nuxt-ackee": "^2.0.0"