feat: migrate to tailwind v3 (#407)

nuxt-modules · Feb 7, 2022 · eacaa5e · eacaa5e
1 parent 1316953
commit eacaa5e
Show file tree

Hide file tree

Showing 17 changed files with 475 additions and 265 deletions.
diff --git a/README.md b/README.md
@@ -16,8 +16,6 @@
 ## Features
 
 - 👌&nbsp; Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
-- 🗜&nbsp; PurgeCSS included for minimal CSS ⚡️
-- ⚡️&nbsp; Supports [Tailwind Just-In-Time](https://github.com/tailwindlabs/tailwindcss-jit)
 - 🪄&nbsp; Includes [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) with [postcss-nesting](https://github.com/csstools/postcss-nesting)
 - 🎨&nbsp; Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))*
 - ⚙️&nbsp; Reference your Tailwind config in your app

diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -6,13 +6,11 @@ category: 'Getting started'
 
 > Add Tailwind CSS to your Nuxt application in seconds.
 
-This module help you setup [Tailwind CSS](https://tailwindcss.com) (version 2) to your [Nuxt](https://nuxtjs.org) application in seconds.
+This module help you setup [Tailwind CSS](https://tailwindcss.com) (version 3) to your [Nuxt](https://nuxtjs.org) application in seconds.
 
 ## Features
 
 - 👌&nbsp; Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
-- 🗜&nbsp; PurgeCSS included for minimal CSS ⚡️
-- ⚡️&nbsp; Supports [Tailwind Just-In-Time](https://tailwindcss.com/docs/just-in-time-mode)
 - 🪄&nbsp; Includes [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) with [postcss-nesting](https://github.com/csstools/postcss-nesting)
 - 🎨&nbsp; Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))*
 - ⚙️&nbsp; Reference your Tailwind config in your app

diff --git a/docs/content/2.setup.md b/docs/content/2.setup.md
@@ -77,26 +77,6 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie
 
 </d-alert>
 
-
-## Tailwind Just-In-Time
-
-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:
-- 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 [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
 
 When running `nuxt dev`, this module will look for these two files:

diff --git a/docs/content/3.options.md b/docs/content/3.options.md
@@ -89,7 +89,7 @@ Learn more about it in the [Referencing in the application](/tailwind/config#ref
 - Default: `0`
 
 You can use any integer to adjust the position of the css insertion.
-The position of the [global css](https://nuxtjs.org/guides/configuration-glossary/configuration-css) injection, which affects the css priority.  
+The position of the [global css](https://nuxtjs.org/guides/configuration-glossary/configuration-css) injection, which affects the css priority.
 
 ```ts [nuxt.config.js]
 export default {
@@ -113,11 +113,9 @@ export default {
   tailwindcss: {
     config: {
       /* Extend the Tailwind config here */
-      purge: {
-        content: [
-          'content/**/**.md'
-        ]
-      }
+      content: [
+        'content/**/**.md'
+      ]
     }
   }
 }

diff --git a/docs/content/examples/2.dark-mode.md b/docs/content/examples/2.dark-mode.md
@@ -5,6 +5,7 @@ csb_link: https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j
 fullscreen: true
 ---
 
+<!-- TODO: Replace with tailwind's native dark mode support. -->
 # Dark Mode Example
 
 > Live example of dark mode with Nuxt TailwindCSS on CodeSandbox.

diff --git a/docs/content/examples/4.postcss-plugin.md b/docs/content/examples/4.postcss-plugin.md
@@ -5,6 +5,7 @@ csb_link: https://codesandbox.io/embed/postcss-plugin-with-nuxt-tailwind-gyfo8
 fullscreen: true
 ---
 
+<!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
 # Example with PostCSS Plugins
 
 > Live example of Nuxt Tailwind with postcss-color-gray plugin

diff --git a/docs/content/tailwind/1.config.md b/docs/content/tailwind/1.config.md
@@ -12,23 +12,20 @@ category: Tailwind CSS
 ```js{}[tailwind.config.js]
 {
   theme: {},
-  variants: {},
   plugins: [],
-  purge: {
-    content: [
-      `components/**/*.{vue,js}`,
-      `layouts/**/*.vue`,
-      `pages/**/*.vue`,
-      `plugins/**/*.{js,ts}`,
-      `nuxt.config.{js,ts}`
-    ]
-  }
+  content: [
+    `components/**/*.{vue,js}`,
+    `layouts/**/*.vue`,
+    `pages/**/*.vue`,
+    `plugins/**/*.{js,ts}`,
+    `nuxt.config.{js,ts}`
+  ]
 }
 ```
 
 > The file is [available on GitHub](https://github.com/nuxt-community/tailwindcss-module/blob/main/lib/files/tailwind.config.js)
 
-You can learn more about the [Tailwind configuration](https://tailwindcss.com/docs/configuration) and the [purge option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) on Tailwind docs.
+You can learn more about the [Tailwind configuration](https://tailwindcss.com/docs/configuration) and the [content configuration](https://tailwindcss.com/docs/content-configuration) on Tailwind docs.
 
 ## Overwriting the configuration
 
@@ -125,21 +122,19 @@ This hook can be asynchronous (using `async/await`) and is called after merging
 
 The provided config will be merged using [defu's array function merger](https://github.com/nuxt-contrib/defu#array-function-merger).
 
-When giving an array to the `purge.content`, it will concat with the default value.
+When giving an array to the `content`, it will concat with the default value.
 
 **Example**
 
 ```js{}[tailwind.config.js]
 module.exports = {
-  purge: {
-    content: [
-      'content/**/*.md'
-    ]
-  }
+  content: [
+    'content/**/*.md'
+  ]
 }
 ```
 
-The `purge.content` option will be:
+The `content` option will be:
 
 ```js
 [
@@ -156,15 +151,13 @@ If you want to fully overwrite, you can use a `function` that receives the defau
 
 ```js{}[tailwind.config.js]
 module.exports = {
-  purge: {
-    content (contentDefaults) {
-      return contentDefaults.map(file => file.replace('.js', '.ts'))
-    }
+  content (contentDefaults) {
+    return contentDefaults.map(file => file.replace('.js', '.ts'))
   }
 }
 ```
 
-The `purge.content` option will be:
+The `content` option will be:
 
 ```js
 [
@@ -178,22 +171,23 @@ The `purge.content` option will be:
 
 <d-alert type="info">
 
-This merging strategy of with a function only applies to `plugins` and `purge.content` since the default value is defined as an `Array`
+This merging strategy of with a function only applies to `plugins` and `content` since the default value is defined as an `Array`
 
 </d-alert>
 
 ### Whitelisting classes
 
-If you need to whitelisting classes and avoid purge system, you need to precise `safelist` option like below :
+If you need to whitelist classes and avoid the content purge system, you need to specify the `safelist` option like below :
 
 ```js{}[tailwind.config.js]
 module.exports = {
-  purge: {
-    options: {
-      // Whitelisting some classes to avoid purge
-      safelist: ['whitelisted']
-    }
-  }
+  // Whitelisting some classes to avoid content purge
+  safelist: [
+    'whitelisted',
+    {
+      pattern: /bg-(red|green|blue)-(100|200|300)/,
+    },
+  ]
 }
 ```
 

diff --git a/docs/package.json b/docs/package.json
@@ -11,10 +11,11 @@
   "license": "MIT",
   "homepage": "https://tailwindcss.nuxtjs.org",
   "devDependencies": {
+    "autoprefixer": "^10.4.0",
     "docus": "^0.1.5",
     "nuxt": "^2.15.4",
-    "postcss": "^8.2.9",
-    "tailwindcss": "^2.0.4",
+    "postcss": "^8.4.4",
+    "tailwindcss": "^3.0.1",
     "vue-plausible": "^1.1.4"
   }
 }