upgrade tailwind to v2.2

package.json

@@ -10,8 +10,6 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "postcss": "^7.0.36",
-    "tailwindcss": "^1.8.8",
     "vue": "^2.6.11",
     "vue-headful": "^2.1.0",
     "vue-infinite-scroll": "^2.0.2",
@@ -24,9 +22,12 @@
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-plugin-eslint": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
+    "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "postcss": "^7.0.36",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
     "vue-template-compiler": "^2.6.11"
   },
   "license": "GPL-3.0"

postcss.config.js

@@ -1,29 +1,6 @@
-const autoprefixer = require('autoprefixer');
-const tailwindcss = require('tailwindcss');
-const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
-
-const purgecss = postcssPurgecss({
-  // Specify the paths to all of the template files in your project.
-  content: [
-    './public/**/*.html',
-    './src/**/*.vue',
-  ],
-  // Include any special characters you're using in this regular expression.
-  // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
-  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
-  // Whitelist auto generated classes for transitions and router links.
-  // From: https://github.com/ky-is/vue-cli-plugin-tailwind
-  whitelistPatterns: [
-    /-(leave|enter|appear)(|-(to|from|active))$/,
-    /^(?!(|.*?:)cursor-move).+-move$/,
-    /^router-link(|-exact)-active$/
-  ],
-});
-
 module.exports = {
-  plugins: [
-    tailwindcss,
-    autoprefixer,
-    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
 };

src/components/SearchField.vue

@@ -43,12 +43,10 @@
       >
           <!-- class="absolute top-0 right-0 w-6 h-6 mx-3 my-3 cursor-pointer dark:text-gray-200" -->
         <svg
-          class="w-8 h-8 mx-1 my-3 p-1 dark:text-gray-200 cursor-pointer stroke-2.5 hover:text-green-400"
+          class="w-8 h-8 p-1 mx-1 my-3 text-gray-900 cursor-pointer stroke-current stroke-2 dark:text-gray-200 hover:text-green-400"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-width="1.5"
           @click="$emit(`search`)"
         >
           <title>Search!</title>

src/views/Contact.vue

@@ -47,13 +47,13 @@
       </h2>
 
       <p class="text-center md:px-12">
-        You can also check out our GitHub repositories <a class="text-blue-600 dark:text-blue-400" href="https://github.com/MCOfficer/odcrawler-discovery" target="_blank" rel="noopener noreferrer">here</a> (backend) and <a class="text-blue-600 dark:text-blue-400" href="https://github.com/Chaphasilor/odcrawler-frontend" target="_blank" rel="noopener noreferrer">here</a> (frontend), if you’d like to contribute ♥
+        You can also check out our GitHub repositories <a class="text-blue-600 underline dark:text-blue-400" href="https://github.com/MCOfficer/odcrawler-discovery" target="_blank" rel="noopener noreferrer">here (backend)</a> and <a class="text-blue-600 underline dark:text-blue-400" href="https://github.com/Chaphasilor/odcrawler-frontend" target="_blank" rel="noopener noreferrer">here (frontend)</a>, if you would like to contribute ❤
         <br>
         Any issues are welcome, but if you don't want to create an issue, you can simply fill out the form below 👇🏻
       </p>
 
       <form
-        class="grid grid-cols-2 row-gap-4 p-6 text-center"
+        class="grid grid-cols-2 p-6 text-center gap-y-4"
         ref="contactForm"
         method="POST"
         data-netlify="true"
@@ -101,7 +101,7 @@
           class="justify-center col-span-2 mt-8 text-lg font-semibold"
         >
           <input
-            class="inline-block h-full p-2 px-12 text-blue-600 transition-colors duration-100 border-blue-600 rounded-lg cursor-pointer dark:text-blue-400 border-3 dark:border-blue-400 hover:bg-blue-600 hover:text-white dark:bg-gray-900 dark:hover:bg-blue-400"
+            class="inline-block h-full p-2 px-12 text-blue-600 transition-colors duration-100 bg-transparent border-blue-600 rounded-lg cursor-pointer dark:text-blue-400 border-3 dark:border-blue-400 hover:bg-blue-600 hover:text-white dark:bg-gray-900 dark:hover:bg-blue-400"
             type="submit"
             value="Submit!"
           >

src/views/Download.vue

@@ -48,7 +48,7 @@
 
       <p class="text-center md:px-12">
         Our search isn’t perfect, we know that. We are doing what we can to improve it, but if you really want to get your hands dirty, you can download a database dump containing all links and search them using RegEx, etc.<br>
-        (You can also check out our GitHub repositories <a class="text-blue-600 dark:text-blue-400" href="https://github.com/MCOfficer/odcrawler-discovery" target="_blank" rel="noopener noreferrer">here</a> and <a class="text-blue-600 dark:text-blue-400" href="https://github.com/Chaphasilor/odcrawler-frontend" target="_blank" rel="noopener noreferrer">here</a>, if you’d like to contribute)
+        (You can also check out our GitHub repositories <a class="text-blue-600 underline dark:text-blue-400" href="https://github.com/MCOfficer/odcrawler-discovery" target="_blank" rel="noopener noreferrer">here</a> and <a class="text-blue-600 underline dark:text-blue-400" href="https://github.com/Chaphasilor/odcrawler-frontend" target="_blank" rel="noopener noreferrer">here</a>, if you’d like to contribute)
       </p>
       <p
         class="mt-4 text-center"
@@ -106,7 +106,7 @@
 
             Download it from
             <a
-              class="text-blue-600 dark:text-blue-400 hover:underline"
+              class="text-blue-600 underline dark:text-blue-400 hover:underline"
               href="https://github.com/BurntSushi/ripgrep"
               rel="noopener noreferrer"
               target="_blank"
@@ -135,7 +135,7 @@
 
             Download it from
             <a
-              class="text-blue-600 dark:text-blue-400 hover:underline"
+              class="text-blue-600 underline dark:text-blue-400 hover:underline"
               href="http://docfetcher.sourceforge.net/en/index.html"
               rel="noopener noreferrer"
               target="_blank"
@@ -164,7 +164,7 @@
 
             Download it from
             <a
-              class="text-blue-600 dark:text-blue-400 hover:underline"
+              class="text-blue-600 underline dark:text-blue-400 hover:underline"
               href="http://astrogrep.sourceforge.net/"
               rel="noopener noreferrer"
               target="_blank"

src/views/Search.vue

@@ -66,7 +66,7 @@
             enter-active-class="transition-all duration-1000 transform"
             enter-class="translate-x-64 opacity-0"
             enter-to-class="translate-x-0 opacity-100"
-            leave-active-class="whitespace-no-wrap transition-all duration-700 transform"
+            leave-active-class="transition-all duration-700 transform whitespace-nowrap"
             leave-class="translate-x-0 opacity-100"
             leave-to-class="w-0 -translate-x-64 opacity-0"
           >

tailwind.config.js

@@ -1,30 +1,21 @@
 module.exports = {
-  purge: {
-    enabled: process.env.NODE_ENV === 'production',
-    content: [
-      './public/**/*.html',
-      './src/**/*.vue'
-    ]
-  },
-  experimental: {
-    darkModeVariant: true,
-  },
+  mode: `jit`,
+  purge: [
+    './public/**/*.html',
+    './src/**/*.{js,jsx,ts,tsx,vue}',
+  ],
+  darkMode: `media`,
   theme: {
+    fontSize: { xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem', '4xl': '2.25rem', '5xl': '3rem', '6xl': '4rem', },
+    colors: { transparent: 'transparent', current: 'currentColor', black: '#000', white: '#fff', gray: { 100: '#f7fafc', 200: '#edf2f7', 300: '#e2e8f0', 400: '#cbd5e0', 500: '#a0aec0', 600: '#718096', 700: '#4a5568', 800: '#2d3748', 900: '#1a202c', }, red: { 100: '#fff5f5', 200: '#fed7d7', 300: '#feb2b2', 400: '#fc8181', 500: '#f56565', 600: '#e53e3e', 700: '#c53030', 800: '#9b2c2c', 900: '#742a2a', }, orange: { 100: '#fffaf0', 200: '#feebc8', 300: '#fbd38d', 400: '#f6ad55', 500: '#ed8936', 600: '#dd6b20', 700: '#c05621', 800: '#9c4221', 900: '#7b341e', }, yellow: { 100: '#fffff0', 200: '#fefcbf', 300: '#faf089', 400: '#f6e05e', 500: '#ecc94b', 600: '#d69e2e', 700: '#b7791f', 800: '#975a16', 900: '#744210', }, green: { 100: '#f0fff4', 200: '#c6f6d5', 300: '#9ae6b4', 400: '#68d391', 500: '#48bb78', 600: '#38a169', 700: '#2f855a', 800: '#276749', 900: '#22543d', }, teal: { 100: '#e6fffa', 200: '#b2f5ea', 300: '#81e6d9', 400: '#4fd1c5', 500: '#38b2ac', 600: '#319795', 700: '#2c7a7b', 800: '#285e61', 900: '#234e52', }, blue: { 100: '#ebf8ff', 200: '#bee3f8', 300: '#90cdf4', 400: '#63b3ed', 500: '#4299e1', 600: '#3182ce', 700: '#2b6cb0', 800: '#2c5282', 900: '#2a4365', }, indigo: { 100: '#ebf4ff', 200: '#c3dafe', 300: '#a3bffa', 400: '#7f9cf5', 500: '#667eea', 600: '#5a67d8', 700: '#4c51bf', 800: '#434190', 900: '#3c366b', }, purple: { 100: '#faf5ff', 200: '#e9d8fd', 300: '#d6bcfa', 400: '#b794f4', 500: '#9f7aea', 600: '#805ad5', 700: '#6b46c1', 800: '#553c9a', 900: '#44337a', }, pink: { 100: '#fff5f7', 200: '#fed7e2', 300: '#fbb6ce', 400: '#f687b3', 500: '#ed64a6', 600: '#d53f8c', 700: '#b83280', 800: '#97266d', 900: '#702459', }, },
     borderRadius: {
       'lg': '15px',
     },
     extend: {
-      colors: {
-      },
-      backgroundColor: {
-
-      },
       fontFamily: {
         'quicksand': ['Quicksand', 'serif', 'system-ui'],
         'quicksand-bold': ['QuicksandBold', 'serif', 'system-ui'],
       },
-      boxShadow: {
-      },
       borderWidth: {
         '3': '3px',
       },
@@ -60,8 +51,6 @@ module.exports = {
         '192': '48rem',
         '256': '64rem',
       },
-      height: {
-      },
       animation: {
         'spin-slow': 'spin 3s linear infinite',
       }