update deps

assets/package.json

@@ -9,36 +9,36 @@
     "test": "standard"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "alpinejs": "^3.9.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "alpinejs": "^3.10.2",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "topbar": "^0.1.4"
+    "topbar": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "autoprefixer": "^10.2.6",
-    "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "^9.0.0",
-    "css-loader": "^5.2.7",
-    "css-minimizer-webpack-plugin": "^3.0.1",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "file-loader": "^6.2.0",
     "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^1.6.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "node-sass": "^7.0.1",
-    "postcss": "^8.3.6",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.1.1",
-    "postcss-preset-env": "^7.3.1",
-    "sass-loader": "^12.1.0",
-    "standard": "^16.0.4",
-    "style-loader": "^3.2.1",
-    "tailwindcss": "^2.2.7",
-    "terser-webpack-plugin": "^5.1.3",
-    "webpack": "^5.67.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.7.4"
+    "postcss": "^8.4.13",
+    "postcss-import": "^14.1.0",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.5.0",
+    "sass-loader": "^12.6.0",
+    "standard": "^17.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.24",
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
   }
 }

assets/tailwind.config.js

@@ -1,33 +1,42 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  purge: [
-    '../lib/**/*.ex',
-    '../lib/**/*.leex',
-    '../lib/**/*.eex',
+  content: [
+    '../lib/**/*.{ex,heex,leex,eex}',
     './js/**/*.js'
   ],
-  darkMode: 'media',
   theme: {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-
       primary: colors.indigo,
-
       black: colors.black,
       white: colors.white,
-      gray: colors.trueGray,
+      gray: colors.neutral,
       indigo: colors.indigo,
       red: colors.rose,
       yellow: colors.amber
     },
-    extend: {}
-  },
-  variants: {
     extend: {
-      backgroundColor: ['active'],
-      borderColor: ['active']
+      spacing: {
+        128: '32rem',
+        192: '48rem',
+        256: '64rem'
+      },
+      minWidth: {
+        4: '1rem',
+        8: '2rem',
+        12: '3rem',
+        16: '4rem',
+        20: '8rem'
+      },
+      maxWidth: {
+        4: '1rem',
+        8: '2rem',
+        12: '3rem',
+        16: '4rem',
+        20: '8rem'
+      }
     }
   },
   plugins: []

assets/webpack.config.js

@@ -44,19 +44,14 @@ module.exports = (env, options) => {
         },
         {
           test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]?[hash]',
-            outputPath: '../fonts'
-          }
+          type: 'asset/resource',
+          generator: { filename: 'fonts/[name][ext]' }
         }
       ]
     },
     plugins: [
       new MiniCssExtractPlugin({ filename: '../css/app.css' }),
-      new CopyWebpackPlugin({
-        patterns: [{ from: 'static/', to: '../' }]
-      })
+      new CopyWebpackPlugin({ patterns: [{ from: 'static/', to: '../' }] })
     ]
   }
 }