Upgrade tailwindcss to v2 (#157)

* Upgrade tailwindcss from 1.1.3 to 1.9.6

* Upgrade tailwindcss from 1.9.6 to 2.2.16

* Use new tailwindcss teal shades

* Improve text/background contrast for ex/top version text after tailwindcss update

* Make some grays lighter for better contrast

Co-authored-by: Daniel Gomez de Souza <daniel@wyeworks.com>

Author: grzuy

assets/css/app.css

@@ -26,17 +26,17 @@ body {
 }
 
 .contextual-help-doc pre {
-  background-color: #234e52; /* teal-900 */
+  @apply bg-teal-900;
+  @apply text-teal-300;
   border-radius: 4px;
-  color: #81e6d9; /* teal-300 */
   margin-bottom: 0.5rem;
   padding: 0.25rem 0.5rem;
   white-space: pre-wrap;
 }
 
 .contextual-help-doc p > code {
-  background-color: #234e52; /* teal-900 */
+  @apply bg-teal-900;
+  @apply text-teal-300;
   border-radius: 2px;
-  color: #81e6d9; /* teal-300 */
   padding: 0.25rem;
 }

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'
           ],
         }
       ]