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>

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