feat: Update tailwind to 2.1 to natively support JIT (#326)

* update tw to natively support jit

* Update docs for jit activation

* Update jit presentation link to the blog's one

* Update 2.setup.md

* chore: update pr

* chore: update dependencies

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

Author: RomainMazB

docs/content/2.setup.md

@@ -84,18 +84,21 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie
 
 ## Tailwind Just-In-Time
 
-Tailwind recently released [@tailwindcss/jit](https://github.com/tailwindlabs/tailwindcss-jit) to make the web development much faster.
+Tailwind recently released [@tailwindcss/jit](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css) to make the web development much faster.
 
-To activate the option, set `jit: true` in your `nuxt.config.js`:
+To activate the option:
+- create and modify your custom `tailwind.config.js` as mentioned in [the tailwind's documentation](https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode)
+- then override the purge config directly into the `tailwind.config.js` file to select the file to want to watch
 
-```ts [nuxt.config.js]
-export default {
-  tailwindcss: {
-    jit: true
-  }
+
+```ts [tailwind.config.js]
+module.exports = {
+  mode: 'jit'
 }
 ```
 
+_The double tilde to mention the Nuxt config file is an alias to the root directory which could be different from the sources directory._
+
 Restart your Nuxt server and see how fast it is now ⚡️
 
 ## Tailwind Files

docs/content/3.options.md

@@ -13,7 +13,6 @@ export default {
   tailwindcss: {
     cssPath: '~/assets/css/tailwind.css',
     configPath: 'tailwind.config.js',
-    jit: false,
     exposeConfig: false,
     config: {}
   }
@@ -64,18 +63,6 @@ export default {
 }
 ```
 
-## `jit`
-
-- Default: `false`
-
-Activate Tailwind Just-In-Time package, learn more on https://github.com/tailwindlabs/tailwindcss-jit
-
-When enabled, you should see this in your console when running `nuxt dev`:
-
-```bash
-ℹ Tailwind JIT activated 
-```
-
 ## `exposeConfig`
 
 If you need resolved tailwind config in runtime, you can enable exposeConfig option in nuxt.config:

docs/content/tailwind/1.config.md

@@ -16,14 +16,11 @@ category: Tailwind CSS
   plugins: [],
   purge: {
     content: [
-      'components/**/*.vue',
-      'layouts/**/*.vue',
-      'pages/**/*.vue',
-      'plugins/**/*.js',
-      'nuxt.config.js',
-      // TypeScript
-      'plugins/**/*.ts',
-      'nuxt.config.ts'
+      `components/**/*.{vue,js}`,
+      `layouts/**/*.vue`,
+      `pages/**/*.vue`,
+      `plugins/**/*.{js,ts}`,
+      `nuxt.config.{js,ts}`
     ]
   }
 }

example/nuxt.config.js

@@ -4,9 +4,7 @@ export default {
   buildModules: [
     tailwindModule
   ],
-
   components: true,
-
   tailwindcss: {
     jit: true,
     exposeConfig: true

example/tailwind.config.js

@@ -1,2 +1,3 @@
 export default {
+  mode: 'jit'
 }

package-lock.json

@@ -27,26 +27,26 @@
     "@nuxt/postcss8": "^1.1.3",
     "@tailwindcss/jit": "^0.1.18",
     "autoprefixer": "^10.2.5",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
     "clear-module": "^4.1.1",
     "consola": "^2.15.3",
-    "defu": "^3.2.2",
-    "postcss": "^8.2.9",
+    "defu": "^4.0.1",
+    "postcss": "^8.2.13",
     "postcss-custom-properties": "^11.0.0",
-    "postcss-nesting": "^7.0.1",
+    "postcss-nesting": "^8.0.1",
     "tailwind-config-viewer": "^1.5.1",
-    "tailwindcss": "^2.0.4",
-    "ufo": "^0.6.10"
+    "tailwindcss": "^2.1.2",
+    "ufo": "^0.7.2"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "^0.2.1",
+    "@nuxt/test-utils": "^0.2.2",
     "@nuxtjs/eslint-config-typescript": "^6.0.0",
-    "@types/jest": "^26.0.22",
-    "codecov": "^3.8.1",
-    "eslint": "^7.23.0",
+    "@types/jest": "^26.0.23",
+    "codecov": "^3.8.2",
+    "eslint": "^7.25.0",
     "jest": "^26.6.3",
     "nuxt": "^2.15.4",
-    "siroc": "^0.8.0",
-    "standard-version": "^9.1.1"
+    "siroc": "^0.9.2",
+    "standard-version": "^9.3.0"
   }
 }

package.json

@@ -17,8 +17,7 @@ async function tailwindCSSModule (moduleOptions) {
     cssPath: join(nuxt.options.dir.assets, 'css', 'tailwind.css'),
     exposeConfig: false,
     config: defaultTailwindConfig(nuxt.options),
-    viewer: nuxt.options.dev,
-    jit: false
+    viewer: nuxt.options.dev
   })
 
   const configPath = nuxt.resolver.resolveAlias(options.configPath)
@@ -79,14 +78,15 @@ async function tailwindCSSModule (moduleOptions) {
     // Compute hash
     tailwindConfig._hash = String(Date.now())
 
-    // Add Tailwind PostCSS plugin
-    /* istanbul ignore else */
-    if (options.jit !== false) {
-      nuxt.options.build.postcss.plugins['@tailwindcss/jit'] = tailwindConfig
+    if (options.jit === true) {
+      logger.warn('`tailwindcss.jit` option had been deprecated in favour of `mode: \'jit\'` in `tailwind.config.js`')
+      tailwindConfig.mode = 'jit'
+    }
+
+    if (tailwindConfig.mode === 'jit') {
       logger.info('Tailwind JIT activated')
-    } else {
-      nuxt.options.build.postcss.plugins.tailwindcss = tailwindConfig
     }
+    nuxt.options.build.postcss.plugins.tailwindcss = tailwindConfig
 
     /*
     ** Expose resolved tailwind config as an alias

src/index.ts

@@ -1,21 +1,19 @@
 // Learn more at https://tailwindcss.com/docs/configuration
-export default ({ _dev, rootDir, srcDir }) => ({
+export default ({ rootDir, srcDir }) => ({
+  theme: {
+    extend: {}
+  },
+  variants: {
+    extend: {}
+  },
+  plugins: [],
   purge: {
     content: [
       `${srcDir}/components/**/*.{vue,js}`,
       `${srcDir}/layouts/**/*.vue`,
       `${srcDir}/pages/**/*.vue`,
       `${srcDir}/plugins/**/*.{js,ts}`,
       `${rootDir}/nuxt.config.{js,ts}`
-    ],
-    // https://tailwindcss.com/docs/optimizing-for-production#purge-css-options
-    options: {}
-  },
-  theme: {
-    extend: {}
-  },
-  variants: {
-    extend: {}
-  },
-  plugins: []
+    ]
+  }
 })