feat: tailwind jit (#288)

* feat: add Tailwind JIT support

* chore: improvements

* chore: remove duplicate postcss-nested

* chore: simplify

lib/module.js

@@ -7,6 +7,14 @@ const { joinURL, withTrailingSlash } = require('ufo')
 
 const logger = require('./logger')
 const defaultTailwindConfig = require('./files/tailwind.config.js')
+const isInstalled = (pkg, requireModule = require) => {
+  try {
+    requireModule(pkg)
+    return true
+  } catch (e) {
+    return false
+  }
+}
 
 module.exports = async function (moduleOptions) {
   const { nuxt } = this
@@ -25,7 +33,6 @@ module.exports = async function (moduleOptions) {
   // https://tailwindcss.com/docs/using-with-preprocessors#future-css-features
   nuxt.options.build.postcss = defu(nuxt.options.build.postcss, {
     plugins: {
-      tailwindcss: {},
       'postcss-nested': {},
       'postcss-custom-properties': {}
     }
@@ -71,7 +78,15 @@ module.exports = async function (moduleOptions) {
 
     // Set tailwindcss config
     await nuxt.callHook('tailwindcss:config', tailwindConfig)
-    nuxt.options.build.postcss.plugins.tailwindcss = tailwindConfig
+
+    // Add Tailwind PostCSS plugin
+    const postcss = nuxt.options.build.postcss
+    if (isInstalled('@tailwindcss/jit', nuxt.resolver.requireModule)) {
+      postcss.plugins['@tailwindcss/jit'] = tailwindConfig
+      logger.info('Tailwind JIT activated')
+    } else {
+      postcss.plugins.tailwindcss = tailwindConfig
+    }
 
     /*
     ** Expose resolved tailwind config as an alias

package.json

@@ -25,13 +25,13 @@
     "lib"
   ],
   "dependencies": {
+    "@nuxt/postcss8": "^1.1.3",
     "autoprefixer": "^10.2.4",
     "chalk": "^4.1.0",
     "clear-module": "^4.1.1",
     "consola": "^2.15.3",
     "defu": "^3.2.2",
     "fs-extra": "^9.1.0",
-    "@nuxt/postcss8": "^1.1.3",
     "postcss": "^8.2.7",
     "postcss-nested": "^5.0.5",
     "tailwind-config-viewer": "^1.5.0",