Tweaks

package.json

@@ -15,7 +15,6 @@
     "html-webpack-plugin": "^3.0.6",
     "postcss": "^8.4.13",
     "postcss-loader": "^2.1.1",
-    "purgecss-webpack-plugin": "^1.4.0",
     "style-loader": "^0.20.3",
     "tailwindcss": "^3.0.24",
     "webpack": "^4.29.6",

src/index.html

@@ -122,7 +122,7 @@
         />
       </div>
       <div
-        class="sticky top-0 z-10 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-300 md:space-y-0 md:flex-row md:px-6 lg:px-8"
+        class="sticky top-0 z-10 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-100 md:space-y-0 md:flex-row md:px-6 lg:px-8"
       >
         <div
           class="flex flex-col p-1 space-x-0 space-y-1 bg-gray-200 rounded md:flex-row md:space-x-1 md:space-y-0"
@@ -278,7 +278,7 @@
       </div>
 
       <div
-        class="grid grid-cols-2 gap-2 p-4 md:p-6 lg:p-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 md:gap-4"
+        class="grid grid-cols-2 p-4 md:p-6 lg:p-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 divide-x divide-y divide-gray-300"
       >
         <template x-for="(item, index) in filteredIcons" :key="index">
           <a
@@ -290,7 +290,7 @@
             item.icon_path +
             `.svg`"
             x-bind:download="downloadType === 'download-svg' && item.icon_name"
-            class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 transition duration-150 ease-in-out bg-white rounded shadow cursor-pointer group hover:shadow-xl md:h-40"
+            class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 transition duration-150 ease-in-out bg-white cursor-pointer group hover:shadow-xl hover:z-10 md:h-40"
             @click="handleClick(item, downloadType, $event, $dispatch)"
           >
             <div>
@@ -299,7 +299,7 @@
                 x-show="copied === item.icon_name"
                 x-on:show:toast.document="copied = $event.detail"
                 x-cloak
-                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"
+                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 hover:border hover:border-black"
                 style="width: fit-content"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-90"

webpack.config.js

@@ -1,20 +1,7 @@
-const path = require("path");
-const glob = require("glob-all");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const PurgecssPlugin = require("purgecss-webpack-plugin");
 
-/**
- * Custom PurgeCSS Extractor
- * https://github.com/FullHuman/purgecss
- * https://github.com/FullHuman/purgecss-webpack-plugin
- */
-class TailwindExtractor {
-  static extract(content) {
-    return content.match(/[A-z0-9-:\/]+/g);
-  }
-}
 
 module.exports = {
   entry: "./src/css/tailwind.src.css",
@@ -26,7 +13,7 @@ module.exports = {
         use: ExtractTextPlugin.extract({
           fallback: "style-loader",
           use: [
-            { loader: "css-loader", options: { importLoaders: 1 } },
+            { loader: "css-loader", options: { importLoaders: 2 } },
             "postcss-loader",
           ],
         }),
@@ -55,14 +42,5 @@ module.exports = {
         to: "js",
       },
     ]),
-    new PurgecssPlugin({
-      paths: glob.sync([path.join(__dirname, "src/**/*.html")]),
-      extractors: [
-        {
-          extractor: TailwindExtractor,
-          extensions: ["html", "js"],
-        },
-      ],
-    }),
   ],
 };