chore(web): add tailwindcss

Signed-off-by: SphericalKat <amolele@gmail.com>

assets/css/app.css

@@ -1,4 +1,8 @@
 /* This file is for your main application css. */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
 @import "./phoenix.css";
 
 /* Alerts and form errors */

assets/package.json

@@ -13,14 +13,19 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "autoprefixer": "^10.3.1",
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "sass-loader": "^8.0.2",
-    "node-sass": "^4.13.1",
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "postcss": "^8.3.6",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^4.2.0",
+    "sass-loader": "^8.0.2",
+    "tailwindcss": "^2.2.7",
     "terser-webpack-plugin": "^2.3.2",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.2"

assets/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+		"postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

assets/tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

assets/webpack.config.js

@@ -39,6 +39,7 @@ module.exports = (env, options) => {
           use: [
             MiniCssExtractPlugin.loader,
             'css-loader',
+						'postcss-loader',
             'sass-loader',
           ],
         }