.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,26 @@
+---
+name: Bug report
+about: Report a bug report to help us improve the module.
+title: ''
+labels: 'bug'
+assignees: ''
+
+---
+
+<!-- **IMPORTANT!**
+Before reporting a bug, please make sure that you have read through our and the TailwindCSS documentation and you think your problem is indeed an issue related to our module. -->
+
+### Version
+@nuxtjs/tailwindcss: <!-- ex: v1.1.0 -->
+nuxt: <!-- ex: v2.12.0 -->
+
+### Reproduction Link
+<!-- A minimal test case based on a fork of https://codesandbox.io/s/o4vn5pvp7q or a GitHub repository that can reproduce the bug. -->
+
+### Steps to reproduce
+
+
+### What is Expected?
+
+
+### What is actually happening?

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Nuxt Community Discord
+    url: https://discord.nuxtjs.org/
+    about: Consider asking questions about the module here.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea or enhancement for the module.
+title: ''
+labels: 'enhancement'
+assignees: ''
+
+---
+
+### Is your feature request related to a problem? Please describe.
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+### Describe the solution you'd like
+<!-- A clear and concise description of what you want to happen. -->
+
+### Describe alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+### Additional context
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,16 @@
+---
+name: Question
+about: Ask a question about the module.
+title: ''
+labels: 'question'
+assignees: ''
+
+---
+
+<!-- **IMPORTANT!**
+Please make sure to look for an answer to your question in our documentation and the Tailwindcss documentation before asking a question here.
+
+If you have a general question regarding Nuxt-Tailwindcss use Discord `modules` channel. Thanks!
+
+Nuxt Discord: https://discord.nuxtjs.org/
+-->

README.md

@@ -7,7 +7,7 @@
   <a href="https://www.npmjs.com/package/@nuxtjs/tailwindcss"><img src="https://badgen.net/npm/license/@nuxtjs/tailwindcss" alt="License"></a>
 </p>
 
-> [Tailwind CSS](https://tailwindcss.com) module for [NuxtJS](https://nuxtjs.org) with [nuxt-purgecss](https://github.com/Developmint/nuxt-purgecss) + [modern css](https://tailwindcss.com/docs/using-with-preprocessors#future-css-features) ⚡️
+> [Tailwind CSS](https://tailwindcss.com) module for [NuxtJS](https://nuxtjs.org) with [modern css](https://tailwindcss.com/docs/using-with-preprocessors#future-css-features) ⚡️
 
 ## Infos
 
@@ -42,7 +42,7 @@ This module will automatically create two files in your [srcDir](https://nuxtjs.
 - `~/tailwind.config.js`
 - `~/assets/css/tailwind.css`
 
-It will also inject the CSS file globally and configure [nuxt-purgecss](https://github.com/Developmint/nuxt-purgecss) and [postcss-preset-env](https://preset-env.cssdb.org) to [stage 1](https://preset-env.cssdb.org/features#stage-1).
+It will also inject the CSS file globally and configure the [purge option](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css) and [postcss-preset-env](https://preset-env.cssdb.org) to [stage 1](https://preset-env.cssdb.org/features#stage-1).
 
 ## Configuration
 
@@ -57,34 +57,12 @@ If you want to set a different path for the configuration file or css file, you
   tailwindcss: {
     configPath: '~/config/tailwind.config.js',
     cssPath: '~/assets/css/tailwind.css',
-    purgeCSSInDev: false,
     exposeConfig: false
   }
 }
 ```
 
-To enable purgeCSS in development, set `purgeCSSInDev: true`, be careful that it will slow down your development process.
-
-If you want to set any (additional) purgeCSS configuration options, you can add a purgeCSS configuration object:
-
-```js
-// nuxt.config.js
-{
-  purgeCSS: {
-    whitelist: ['css-selector-to-whitelist'],
-  },
-}
-```
-
-See full options here: https://github.com/Developmint/nuxt-purgecss#options
-
-You can also use CSS comments to tell purgeCSS to ignore some blocks:
-
-```css
-/* purgecss start ignore */
-@import '@snackbar/core/dist/snackbar.css';
-/* purgecss end ignore */
-```
+To enable purgeCSS in development, set `purge.enabled: true` in `tailwind.config.js`, be careful that it will slow down your development process. Learn more on [removing unused CSS](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css).
 
 ## Referencing in JavaScript
 
@@ -97,7 +75,7 @@ If you need resolved tailwind config in runtime, you can enable `exposeConfig` o
 {
   tailwindcss: {
     exposeConfig: true
-  },
+  }
 }
 ```
 

example/assets/css/tailwind.css

@@ -1,5 +1,3 @@
-/* purgecss start ignore */
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-/* purgecss end ignore */
 @import 'tailwindcss/utilities';

example/nuxt.config.js

@@ -1,11 +1,8 @@
-const { resolve } = require('path')
+import tailwindModule from '..'
 
-module.exports = {
-  rootDir: resolve(__dirname, '..'),
-  buildDir: resolve(__dirname, '.nuxt'),
-  srcDir: __dirname,
+export default {
   modules: [
-    require('..')
+    tailwindModule
   ],
   tailwindcss: {
     exposeConfig: true

example/tailwind.config.js

@@ -7,5 +7,17 @@
 module.exports = {
   theme: {},
   variants: {},
-  plugins: []
+  plugins: [],
+  purge: {
+    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
+    enabled: process.env.NODE_ENV === 'production',
+    // We prefixed with `example/` here since we run `nuxt example/` and working dir is '../' for PurgeCSS
+    content: [
+      'example/components/**/*.vue',
+      'example/layouts/**/*.vue',
+      'example/pages/**/*.vue',
+      'example/plugins/**/*.js',
+      'example/nuxt.config.js'
+    ]
+  }
 }

lib/module.js

@@ -5,7 +5,6 @@ module.exports = async function (moduleOptions) {
   const options = {
     configPath: 'tailwind.config.js',
     cssPath: join(this.options.dir.assets, 'css', 'tailwind.css'),
-    purgeCSSInDev: false,
     exposeConfig: false,
     ...this.options.tailwindcss,
     ...moduleOptions
@@ -28,35 +27,22 @@ module.exports = async function (moduleOptions) {
   }
 
   // This hooks is called only for `nuxt dev` and `nuxt build` commands
-  this.nuxt.hook('build:before', async () => {
+  this.nuxt.hook('build:before', () => {
     /*
-    ** Set PostCSS config (before nuxt-purgecss)
+    ** Set PostCSS config
     */
     const { postcss } = this.options.build
 
     postcss.preset.stage = 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-features
     postcss.plugins = postcss.plugins || {}
 
+    /* istanbul ignore if */
     if (Array.isArray(postcss.plugins)) {
       postcss.plugins.push(require('tailwindcss')(configPath))
     } else if (typeof postcss.plugins === 'object') {
       postcss.plugins.tailwindcss = postcss.plugins.tailwindcss || configPath
     }
 
-    /*
-    ** Add nuxt-purgecss module and set config
-    ** only for `nuxt build` command
-    */
-    const purgeCSSEnabled = this.options.dev === false || options.purgeCSSInDev === true
-    if (purgeCSSEnabled) {
-      const purgeCSS = {
-        mode: 'postcss',
-        enabled: purgeCSSEnabled,
-        ...(this.options.purgeCSS || {})
-      }
-      await this.requireModule(['nuxt-purgecss', purgeCSS])
-    }
-
     /*
     ** Expose resolved tailwind config as an alias
     ** https://tailwindcss.com/docs/configuration/#referencing-in-javascript

lib/templates/tailwind.config.js

@@ -7,5 +7,16 @@
 module.exports = {
   theme: {},
   variants: {},
-  plugins: []
+  plugins: [],
+  purge: {
+    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
+    enabled: process.env.NODE_ENV === 'production',
+    content: [
+      'components/**/*.vue',
+      'layouts/**/*.vue',
+      'pages/**/*.vue',
+      'plugins/**/*.js',
+      'nuxt.config.js'
+    ]
+  }
 }

lib/templates/tailwind.css

@@ -1,5 +1,3 @@
-/* purgecss start ignore */
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-/* purgecss end ignore */
 @import 'tailwindcss/utilities';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/tailwindcss",
-  "version": "1.4.1",
+  "version": "2.0.0",
   "description": "TailwindCSS module for Nuxt.js",
   "license": "MIT",
   "contributors": [
@@ -25,17 +25,17 @@
   "dependencies": {
     "consola": "^2.11.3",
     "fs-extra": "^9.0.0",
-    "nuxt-purgecss": "^0.2.1",
-    "tailwindcss": "^1.3.4"
+    "tailwindcss": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@nuxtjs/eslint-config": "^2.0.2",
+    "@nuxtjs/module-test-utils": "^1.6.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.4.0",
+    "babel-jest": "^25.5.1",
     "codecov": "^3.6.5",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.1",
@@ -45,12 +45,10 @@
     "eslint-plugin-promise": "latest",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
-    "get-port": "^5.1.1",
     "husky": "^4.2.5",
-    "jest": "^25.4.0",
+    "jest": "^25.5.2",
     "nuxt": "^2.12.2",
     "request": "^2.88.2",
-    "request-promise-native": "^1.0.8",
     "standard-version": "^7.1.0"
   }
 }

test/config.test.js

@@ -1,36 +1,30 @@
-jest.setTimeout(60000)
-
 const { join } = require('path')
 const { remove } = require('fs-extra')
-const { Nuxt, Builder, loadNuxtConfig } = require('nuxt')
-const request = require('request-promise-native')
-const getPort = require('get-port')
+const { setup, get } = require('@nuxtjs/module-test-utils')
 const logger = require('@/logger')
+const tailwindModule = require('..')
 
 logger.mockTypes(() => jest.fn())
 
-let nuxt, port
-
-const url = path => `http://localhost:${port}${path}`
-const get = path => request(url(path))
-
 describe('config', () => {
+  let nuxt
+
   beforeAll(async () => {
-    const config = await loadNuxtConfig({
-      configFile: 'example/nuxt.config.js'
-    })
-    config.dev = false
-    config.modules = [require(('@/module'))]
-    Object.assign(config.tailwindcss, {
-      configPath: 'custom/tailwind.js',
-      cssPath: 'custom/tailwind.css'
-    })
-    nuxt = new Nuxt(config)
-    await nuxt.ready()
-    await new Builder(nuxt).build()
-    port = await getPort()
-    await nuxt.listen(port)
-  })
+    const rootDir = join(__dirname, '..', 'example')
+    const config = {
+      rootDir,
+      buildModules: [
+        tailwindModule
+      ],
+      tailwindcss: {
+        exposeConfig: true,
+        configPath: 'custom/tailwind.js',
+        cssPath: 'custom/tailwind.css'
+      }
+    }
+
+    nuxt = (await setup(config)).nuxt
+  }, 60000)
 
   afterAll(async () => {
     await nuxt.close()

test/fail.test.js

@@ -1,23 +1,30 @@
-jest.setTimeout(60000)
+const { join } = require('path')
+const { setup } = require('@nuxtjs/module-test-utils')
+const logger = require('@/logger')
+// Mock fs-extra
 require('fs-extra').pathExists = jest.fn().mockImplementation(() => Promise.resolve(false))
 require('fs-extra').copy = jest.fn().mockImplementation(() => Promise.reject(new Error('Error when copy')))
-
-const { Nuxt, Builder } = require('nuxt')
-const logger = require('@/logger')
-const config = require('../example/nuxt.config')
+const tailwindModule = require('..')
 
 logger.mockTypes(() => jest.fn())
 
-config.dev = false
-
-let nuxt
-
 describe('fail', () => {
+  let nuxt
+
   beforeAll(async () => {
-    nuxt = new Nuxt(config)
-    await nuxt.ready()
-    await new Builder(nuxt).build()
-  })
+    const rootDir = join(__dirname, '..', 'example')
+    const config = {
+      rootDir,
+      buildModules: [
+        tailwindModule
+      ],
+      tailwindcss: {
+        exposeConfig: true
+      }
+    }
+
+    nuxt = (await setup(config)).nuxt
+  }, 60000)
 
   afterAll(async () => {
     await nuxt.close()