Updated tailwind

package.json

@@ -7,18 +7,17 @@
     "prod": "npm run zip && cross-env NODE_ENV=production webpack --no-progress"
   },
   "devDependencies": {
-    "@tailwindcss/custom-forms": "^0.2.1",
     "copy-webpack-plugin": "^5.0.2",
     "cross-env": "^5.1",
     "css-loader": "^0.28.10",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "glob-all": "^3.1.0",
     "html-webpack-plugin": "^3.0.6",
-    "postcss": "^6.0.19",
+    "postcss": "^8.4.13",
     "postcss-loader": "^2.1.1",
     "purgecss-webpack-plugin": "^1.4.0",
     "style-loader": "^0.20.3",
-    "tailwindcss": "^1.6.0",
+    "tailwindcss": "^3.0.24",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.2.1"
@@ -26,6 +25,7 @@
   "dependencies": {
     "alpinejs": "^2.3.5",
     "archiver": "^5.0.0",
+    "autoprefixer": "^10.4.6",
     "typeface-roboto-mono": "^0.0.75"
   }
 }

src/index.html

@@ -302,11 +302,11 @@
                 class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded"
                 style="width: fit-content"
                 x-transition:enter="transition ease-out duration-200"
-                x-transition:enter-start="opacity-0 transform scale-90"
-                x-transition:enter-end="opacity-100 transform scale-100"
+                x-transition:enter-start="opacity-0 scale-90"
+                x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-500 "
-                x-transition:leave-start="opacity-100 transform scale-100"
-                x-transition:leave-end="opacity-0 transform scale-90"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-90"
               >
                 <template x-if="downloadType == 'download-svg'"
                   ><span>Downloading!</span></template
@@ -322,7 +322,7 @@
             <img
               :src="`images/icons/` + item.icon_path + `.svg`"
               :alt="item.icon_name"
-              class="transition duration-200 transform group-hover:scale-200"
+              class="transition duration-200 group-hover:scale-200"
               loading="lazy"
             />
             <p

tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  purge: ["./src/**/*.html"],
+  content: ["./src/**/*.html"],
   theme: {
     fontFamily: {
       mono: [
@@ -10,10 +10,6 @@ module.exports = {
       "200": "2",
     },
   },
-  variants: {
-    scale: ["responsive", "hover", "focus", "group-hover"],
-    backgroundColor: ["responsive", "hover", "focus", "focus-within"],
-  },
   plugins: [
     // Some useful comment
   ],