chore(deps): Move to Tailwind 2 (nuxt-modules#132)

* chore: use tailwind 2

* fix: add direct dependency

* chore: update dependencies

* chore: update

* chore: improvements

* chore: update tailwind

Co-authored-by: Pooya Parsa <[email protected]>

package.json

@@ -20,37 +20,36 @@
     "@docsearch/css": "^1.0.0-alpha.28",
     "@docsearch/js": "^1.0.0-alpha.28",
     "@nuxt/content": "^1.14.0",
-    "@nuxtjs/color-mode": "^2.0.3",
-    "@nuxtjs/google-fonts": "1.2.0",
+    "@nuxtjs/color-mode": "^2.0.4",
+    "@nuxtjs/google-fonts": "1.3.0",
     "@nuxtjs/pwa": "^3.3.5",
-    "@nuxtjs/tailwindcss": "^3.4.2",
+    "@nuxtjs/tailwindcss": "^4.0.0-4",
     "@tailwindcss/aspect-ratio": "^0.2.0",
     "@tailwindcss/typography": "0.4.0",
-    "@vue/composition-api": "^1.0.0-rc.2",
-    "@vueuse/integrations": "^4.2.1",
-    "clipboard": "^2.0.6",
+    "@vue/composition-api": "^1.0.0-rc.3",
+    "@vueuse/integrations": "^4.3.4",
+    "clipboard": "^2.0.7",
     "defu": "^3.2.2",
     "lodash.groupby": "^4.6.0",
-    "nuxt-i18n": "^6.20.0",
-    "ohmyfetch": "^0.1.6",
-    "postcss": "^7",
+    "nuxt-i18n": "^6.20.6",
+    "ohmyfetch": "^0.1.8",
+    "postcss": "^8.2.7",
     "prism-themes": "^1.5.0",
-    "static-tweets": "^0.2.7",
+    "static-tweets": "^0.3.0",
     "tailwind-css-variables": "^2.0.3",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "tailwindcss": "^2.0.3",
     "theme-colors": "^0.0.5",
-    "ufo": "^0.6.7",
+    "ufo": "^0.6.9",
     "universal-cookie": "^4.0.4",
     "vue-docgen-api": "^4.35.0"
   },
   "devDependencies": {
-    "@nuxt/types": "^2.14.12",
-    "@nuxtjs/eslint-config": "^5.0.0",
-    "autoprefixer": "^9",
+    "@nuxt/types": "^2.15.2",
+    "@nuxtjs/eslint-config": "^6.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.19.0",
-    "nuxt": "^2.15.0",
-    "standard-version": "^9.1.0",
-    "vue-plausible": "^1.1.2"
+    "eslint": "^7.21.0",
+    "nuxt-edge": "^2.16.0-26919398.c610d955",
+    "standard-version": "^9.1.1",
+    "vue-plausible": "^1.1.3"
   }
 }

theme/components/dev-templates/DocusUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="open" class="fixed z-50 shadow group bg-gray-50 dark:bg-gray-800 bottom-6 left-6 w-36">
+  <div v-show="open" class="fixed z-50 overflow-hidden rounded shadow group bg-gray-50 dark:bg-gray-800 bottom-6 left-6 w-36">
     <h1 class="flex items-center p-2 font-bold bg-gray-100 dark:bg-gray-700">
       <span class="flex-1">Docus UI</span>
       <IconX class="w-4 h-4 transition-opacity opacity-0 cursor-pointer group-hover:opacity-80" @click.native="open = false" />

theme/components/molecules/ColorSwitcher.vue

@@ -1,13 +1,15 @@
 <template>
   <span class="inline-flex">
     <button
-      class="text-gray-400 transition-colors duration-200 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none"
+      slot="placeholder"
+      class="w-6 h-6 text-gray-400 transition-colors duration-200 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none"
       aria-label="Color Mode"
       @click="$colorMode.value === 'dark' ? $colorMode.preference = 'light' : $colorMode.preference = 'dark'"
     >
       <client-only>
         <IconSun v-if="$colorMode.value === 'light'" class="w-6 h-6" />
         <IconMoon v-else class="w-6 h-6" />
+        <template #placeholder>...</template>
       </client-only>
     </button>
   </span>

theme/tailwind.config.js

@@ -290,20 +290,16 @@ module.exports = ({ nuxt }) => {
       )
     ],
     purge: {
-      // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
-      enabled: process.env.NODE_ENV === 'production',
       content: [
-        path.join(nuxt.options.srcDir, 'content/**/*.md'),
-        path.join(nuxt.options.srcDir, 'components/**/*.vue'),
-        path.join(nuxt.options.rootDir, 'nuxt.config.js'),
         path.join(__dirname, 'components/**/*.vue'),
         path.join(__dirname, 'layouts/**/*.vue'),
         path.join(__dirname, 'pages/**/*.vue'),
         path.join(__dirname, 'plugins/**/*.js'),
+        path.join(__dirname, 'utils/**/*.js'),
         'nuxt.config.js'
       ],
       options: {
-        whitelist: ['dark-mode']
+        safelist: []
       }
     }
   }