beautiful works with tailwind webpack

packages/desktop2/package.json

@@ -74,13 +74,18 @@
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "@vercel/webpack-asset-relocator-loader": "1.7.0",
+    "autoprefixer": "^10.4.4",
     "css-loader": "^6.0.0",
     "electron": "17.1.2",
     "eslint": "^8.0.1",
     "eslint-plugin-import": "^2.25.0",
     "fork-ts-checker-webpack-plugin": "^6.0.1",
+    "mini-css-extract-plugin": "^2.6.0",
     "node-loader": "^2.0.0",
+    "postcss": "^8.4.12",
+    "postcss-loader": "^6.2.1",
     "style-loader": "^3.0.0",
+    "tailwindcss": "^3.0.23",
     "ts-loader": "^9.2.2",
     "typescript": "~4.5.4"
   },

packages/desktop2/postcss.config.js

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

packages/desktop2/src/app.tsx

@@ -4,7 +4,10 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 function render() {
-  ReactDOM.render(<h2>Hello from React!</h2>, document.getElementById("root"));
+  ReactDOM.render(
+    <h2 className="text-sm bg-black">Hello from React!</h2>,
+    document.getElementById("root")
+  );
 }
 
 render();

packages/desktop2/src/index.css

@@ -4,5 +4,8 @@ body {
   margin: auto;
   max-width: 38rem;
   padding: 2rem;
-  background-color: black;
 }
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/desktop2/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

packages/desktop2/webpack.main.config.js

@@ -3,12 +3,12 @@ module.exports = {
    * This is the main entry point for your application, it's the first file
    * that runs in the main process.
    */
-  entry: './src/index.ts',
+  entry: "./src/index.ts",
   // Put your normal webpack config below here
   module: {
-    rules: require('./webpack.rules'),
+    rules: require("./webpack.rules"),
   },
   resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
+    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
   },
 };

packages/desktop2/webpack.plugins.js

@@ -1,3 +1,3 @@
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 
 module.exports = [new ForkTsCheckerWebpackPlugin()];

packages/desktop2/webpack.renderer.config.js

@@ -1,9 +1,24 @@
-const rules = require('./webpack.rules');
-const plugins = require('./webpack.plugins');
+const rules = require("./webpack.rules");
+const plugins = require("./webpack.plugins");
+
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const path = require("path");
 
 rules.push({
   test: /\.css$/,
-  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+  use: [
+    { loader: "style-loader" },
+    { loader: "css-loader" },
+    {
+      loader: "postcss-loader",
+      options: {
+        postcssOptions: {
+          config: path.join(__dirname, "postcss.config.js"),
+        },
+      },
+    },
+  ],
 });
 
 module.exports = {
@@ -12,6 +27,6 @@ module.exports = {
   },
   plugins: plugins,
   resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
+    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
   },
 };

packages/desktop2/webpack.rules.js

@@ -1,18 +1,21 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
 module.exports = [
   // Add support for native node modules
   {
     // We're specifying native_modules in the test because the asset relocator loader generates a
     // "fake" .node file which is really a cjs file.
     test: /native_modules\/.+\.node$/,
-    use: 'node-loader',
+    use: "node-loader",
   },
   {
     test: /\.(m?js|node)$/,
     parser: { amd: false },
     use: {
-      loader: '@vercel/webpack-asset-relocator-loader',
+      loader: "@vercel/webpack-asset-relocator-loader",
       options: {
-        outputAssetBase: 'native_modules',
+        outputAssetBase: "native_modules",
       },
     },
   },
@@ -20,7 +23,7 @@ module.exports = [
     test: /\.tsx?$/,
     exclude: /(node_modules|\.webpack)/,
     use: {
-      loader: 'ts-loader',
+      loader: "ts-loader",
       options: {
         transpileOnly: true,
       },