Upgrade tailwindcss from 1.9.6 to 2.2.16

Author: grzuy

assets/package.json

@@ -9,10 +9,10 @@
   "dependencies": {
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
-    "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "tailwindcss": "^1.1.2"
+    "phoenix_live_view": "file:../deps/phoenix_live_view"
   },
   "devDependencies": {
+    "autoprefixer": "^10.3.6",
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "babel-loader": "^8.0.0",
@@ -21,7 +21,9 @@
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^0.4.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.3.8",
+    "postcss-loader": "^4.0.0",
+    "tailwindcss": "^2.2.16",
     "terser-webpack-plugin": "^1.1.0",
     "webpack": "4.4.0",
     "webpack-cli": "^3.3.2"

assets/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer')
-  ]
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
 };

assets/tailwind.config.js

@@ -0,0 +1,17 @@
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        teal: colors.teal
+      }
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

assets/webpack.config.js

@@ -39,14 +39,7 @@ module.exports = (_env, options) => {
           use: [
             MiniCssExtractPlugin.loader,
             'css-loader',
-            {
-              loader: 'postcss-loader',
-              options: {
-                config: {
-                  path: './postcss.config.js'
-                }
-              }
-            }
+            'postcss-loader'
           ],
         }
       ]