deps: added tailwindcss

.eslintrc.json

@@ -12,5 +12,6 @@
     "plugin:import/electron",
     "plugin:import/typescript"
   ],
-  "parser": "@typescript-eslint/parser"
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": "/*.js"
 }

package.json

@@ -87,13 +87,17 @@
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
     "@vercel/webpack-asset-relocator-loader": "1.7.0",
+    "autoprefixer": "^10.4.0",
     "css-loader": "^6.0.0",
     "electron": "16.0.1",
     "eslint": "^7.6.0",
     "eslint-plugin-import": "^2.20.0",
     "fork-ts-checker-webpack-plugin": "^6.0.1",
     "node-loader": "^2.0.0",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
     "style-loader": "^3.0.0",
+    "tailwindcss": "^2.2.19",
     "ts-loader": "^9.2.2",
     "typescript": "^4.0.2"
   },

postcss.config.js

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

src/index.css → src/app.global.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;

src/renderers/main_window.ts

@@ -1,5 +1,6 @@
-import "../index.css";
-import "../windows/MainWIndow";
+import "tailwindcss/tailwind.css";
+import "../app.global.css";
+import "../windows/MainWindow";
 
 /**
  * This file will automatically be loaded by webpack and run in the "renderer" context.

src/renderers/new_instance_window.ts

@@ -1,2 +1,3 @@
-import "../index.css";
+import "tailwindcss/tailwind.css";
+import "../app.global.css";
 import "../windows/NewInstanceWIndow";

src/windows/MainWIndow.tsx

@@ -11,6 +11,9 @@ const MainWindow = () => {
       <h1>Welcome to MultiServer</h1>
       {/* TODO: add instances view */}
       <button onClick={instances.newInstanceWindow}>New Instance</button>
+      <div className="absolute inset-0 bg-white text-center h-full flex flex-col justify justify-center">
+        ERB + TAILWIND = ❤
+      </div>
     </div>
   );
 };

tailwind.config.js

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

webpack.renderer.config.js

@@ -1,11 +1,6 @@
 const rules = require("./webpack.rules");
 const plugins = require("./webpack.plugins");
 
-rules.push({
-  test: /\.css$/,
-  use: [{ loader: "style-loader" }, { loader: "css-loader" }],
-});
-
 module.exports = {
   module: {
     rules,

webpack.rules.js

@@ -26,4 +26,44 @@ module.exports = [
       },
     },
   },
+  {
+    test: /\.global\.css$/,
+    use: [
+      {
+        loader: "style-loader",
+      },
+      {
+        loader: "css-loader",
+        options: {
+          sourceMap: true,
+        },
+      },
+      {
+        loader: "postcss-loader",
+        options: {
+          postcssOptions: {
+            plugins: [require("tailwindcss"), require("autoprefixer")],
+          },
+        },
+      },
+    ],
+  },
+  {
+    test: /^((?!\.global).)*\.css$/,
+    use: [
+      {
+        loader: "style-loader",
+      },
+      {
+        loader: "css-loader",
+        options: {
+          modules: {
+            localIdentName: "[name]__[local]__[hash:base64:5]",
+          },
+          sourceMap: true,
+          importLoaders: 1,
+        },
+      },
+    ],
+  },
 ];