diff --git a/package.json b/package.json
index 93af1a9bdf..2a6ca287a4 100644
--- a/package.json
+++ b/package.json
@@ -361,8 +361,7 @@
     "nodemon": "^2.0.14",
     "playwright": "^1.17.1",
     "postcss": "^8.4.5",
-    "postcss-loader": "4.3.0",
-    "postinstall-postinstall": "^2.1.0",
+    "postcss-loader": "^4.3.0",
     "progress-bar-webpack-plugin": "^2.1.0",
     "randomcolor": "^0.6.2",
     "raw-loader": "^4.0.2",
@@ -373,11 +372,11 @@
     "react-select-event": "^5.1.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6",
-    "sass": "^1.44.0",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.45.1",
+    "sass-loader": "^10.2.0",
     "sharp": "^0.29.3",
     "style-loader": "^2.0.0",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.0.7",
     "ts-jest": "26.5.6",
     "ts-loader": "^7.0.5",
     "ts-node": "^10.4.0",
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 66746899cf..0000000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-module.exports = {
-  plugins: [
-    require("tailwindcss/nesting"),
-    require("tailwindcss"),
-  ],
-};
diff --git a/src/renderer/components/+add-cluster/add-cluster.module.css b/src/renderer/components/+add-cluster/add-cluster.module.scss
similarity index 100%
rename from src/renderer/components/+add-cluster/add-cluster.module.css
rename to src/renderer/components/+add-cluster/add-cluster.module.scss
diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx
index f6b683f654..40257f6518 100644
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./add-cluster.module.css";
+import styles from "./add-cluster.module.scss";
 
 import type { KubeConfig } from "@kubernetes/client-node";
 import fse from "fs-extra";
diff --git a/src/renderer/components/+catalog/catalog-entity-details.module.css b/src/renderer/components/+catalog/catalog-entity-details.module.scss
similarity index 100%
rename from src/renderer/components/+catalog/catalog-entity-details.module.css
rename to src/renderer/components/+catalog/catalog-entity-details.module.scss
diff --git a/src/renderer/components/+catalog/catalog-entity-details.tsx b/src/renderer/components/+catalog/catalog-entity-details.tsx
index b3c9fc73c2..4ac95833da 100644
--- a/src/renderer/components/+catalog/catalog-entity-details.tsx
+++ b/src/renderer/components/+catalog/catalog-entity-details.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./catalog-entity-details.module.css";
+import styles from "./catalog-entity-details.module.scss";
 import React, { Component } from "react";
 import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
diff --git a/src/renderer/components/+catalog/catalog-entity-item.tsx b/src/renderer/components/+catalog/catalog-entity-item.tsx
index 9518131375..01fc46b95d 100644
--- a/src/renderer/components/+catalog/catalog-entity-item.tsx
+++ b/src/renderer/components/+catalog/catalog-entity-item.tsx
@@ -18,7 +18,7 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import styles from "./catalog.module.css";
+import styles from "./catalog.module.scss";
 import React from "react";
 import { action, computed } from "mobx";
 import { CatalogEntity } from "../../api/catalog-entity";
diff --git a/src/renderer/components/+catalog/catalog-menu.module.css b/src/renderer/components/+catalog/catalog-menu.module.scss
similarity index 100%
rename from src/renderer/components/+catalog/catalog-menu.module.css
rename to src/renderer/components/+catalog/catalog-menu.module.scss
diff --git a/src/renderer/components/+catalog/catalog-menu.tsx b/src/renderer/components/+catalog/catalog-menu.tsx
index b2d013dfcd..c80fc1901c 100644
--- a/src/renderer/components/+catalog/catalog-menu.tsx
+++ b/src/renderer/components/+catalog/catalog-menu.tsx
@@ -19,8 +19,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import treeStyles from "./catalog-tree.module.css";
-import styles from "./catalog-menu.module.css";
+import treeStyles from "./catalog-tree.module.scss";
+import styles from "./catalog-menu.module.scss";
 
 import React from "react";
 import { TreeItem, TreeItemProps, TreeView } from "@material-ui/lab";
diff --git a/src/renderer/components/+catalog/catalog-tree.module.css b/src/renderer/components/+catalog/catalog-tree.module.scss
similarity index 100%
rename from src/renderer/components/+catalog/catalog-tree.module.css
rename to src/renderer/components/+catalog/catalog-tree.module.scss
diff --git a/src/renderer/components/+catalog/catalog.module.css b/src/renderer/components/+catalog/catalog.module.scss
similarity index 100%
rename from src/renderer/components/+catalog/catalog.module.css
rename to src/renderer/components/+catalog/catalog.module.scss
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index bb39419ed3..8c9455d805 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./catalog.module.css";
+import styles from "./catalog.module.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
diff --git a/src/renderer/components/+cluster/cluster-issues.module.css b/src/renderer/components/+cluster/cluster-issues.module.scss
similarity index 100%
rename from src/renderer/components/+cluster/cluster-issues.module.css
rename to src/renderer/components/+cluster/cluster-issues.module.scss
diff --git a/src/renderer/components/+cluster/cluster-issues.tsx b/src/renderer/components/+cluster/cluster-issues.tsx
index 6165fde8bd..0537f98224 100644
--- a/src/renderer/components/+cluster/cluster-issues.tsx
+++ b/src/renderer/components/+cluster/cluster-issues.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./cluster-issues.module.css";
+import styles from "./cluster-issues.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
diff --git a/src/renderer/components/+cluster/cluster-metrics.module.css b/src/renderer/components/+cluster/cluster-metrics.module.scss
similarity index 100%
rename from src/renderer/components/+cluster/cluster-metrics.module.css
rename to src/renderer/components/+cluster/cluster-metrics.module.scss
diff --git a/src/renderer/components/+cluster/cluster-metrics.tsx b/src/renderer/components/+cluster/cluster-metrics.tsx
index f4cc72e8d2..919a96e774 100644
--- a/src/renderer/components/+cluster/cluster-metrics.tsx
+++ b/src/renderer/components/+cluster/cluster-metrics.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./cluster-metrics.module.css";
+import styles from "./cluster-metrics.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
diff --git a/src/renderer/components/+cluster/cluster-overview.module.css b/src/renderer/components/+cluster/cluster-overview.module.scss
similarity index 100%
rename from src/renderer/components/+cluster/cluster-overview.module.css
rename to src/renderer/components/+cluster/cluster-overview.module.scss
diff --git a/src/renderer/components/+cluster/cluster-overview.tsx b/src/renderer/components/+cluster/cluster-overview.tsx
index d2e3e3ee9a..064b716e7e 100644
--- a/src/renderer/components/+cluster/cluster-overview.tsx
+++ b/src/renderer/components/+cluster/cluster-overview.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./cluster-overview.module.css";
+import styles from "./cluster-overview.module.scss";
 
 import React from "react";
 import { reaction } from "mobx";
diff --git a/src/renderer/components/+cluster/cluster-pie-charts.module.css b/src/renderer/components/+cluster/cluster-pie-charts.module.scss
similarity index 100%
rename from src/renderer/components/+cluster/cluster-pie-charts.module.css
rename to src/renderer/components/+cluster/cluster-pie-charts.module.scss
diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx
index 80df2c1a9c..c88202c410 100644
--- a/src/renderer/components/+cluster/cluster-pie-charts.tsx
+++ b/src/renderer/components/+cluster/cluster-pie-charts.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./cluster-pie-charts.module.css";
+import styles from "./cluster-pie-charts.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
diff --git a/src/renderer/components/+entity-settings/entity-settings.module.css b/src/renderer/components/+entity-settings/entity-settings.module.scss
similarity index 100%
rename from src/renderer/components/+entity-settings/entity-settings.module.css
rename to src/renderer/components/+entity-settings/entity-settings.module.scss
diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx
index 65a953a655..ee543490eb 100644
--- a/src/renderer/components/+entity-settings/entity-settings.tsx
+++ b/src/renderer/components/+entity-settings/entity-settings.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./entity-settings.module.css";
+import styles from "./entity-settings.module.scss";
 
 import React from "react";
 import { observable, makeObservable } from "mobx";
diff --git a/src/renderer/components/+extensions/install.module.css b/src/renderer/components/+extensions/install.module.scss
similarity index 100%
rename from src/renderer/components/+extensions/install.module.css
rename to src/renderer/components/+extensions/install.module.scss
diff --git a/src/renderer/components/+extensions/install.tsx b/src/renderer/components/+extensions/install.tsx
index 36ec5be2f9..2f81d7e950 100644
--- a/src/renderer/components/+extensions/install.tsx
+++ b/src/renderer/components/+extensions/install.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./install.module.css";
+import styles from "./install.module.scss";
 import React from "react";
 import { prevDefault } from "../../utils";
 import { Button } from "../button";
diff --git a/src/renderer/components/+extensions/installed-extensions.module.css b/src/renderer/components/+extensions/installed-extensions.module.scss
similarity index 100%
rename from src/renderer/components/+extensions/installed-extensions.module.css
rename to src/renderer/components/+extensions/installed-extensions.module.scss
diff --git a/src/renderer/components/+extensions/installed-extensions.tsx b/src/renderer/components/+extensions/installed-extensions.tsx
index 14e490bed5..83c12b8603 100644
--- a/src/renderer/components/+extensions/installed-extensions.tsx
+++ b/src/renderer/components/+extensions/installed-extensions.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./installed-extensions.module.css";
+import styles from "./installed-extensions.module.scss";
 import React, { useMemo } from "react";
 import { ExtensionDiscovery, InstalledExtension } from "../../../extensions/extension-discovery";
 import { Icon } from "../icon";
diff --git a/src/renderer/components/+extensions/notice.module.css b/src/renderer/components/+extensions/notice.module.scss
similarity index 100%
rename from src/renderer/components/+extensions/notice.module.css
rename to src/renderer/components/+extensions/notice.module.scss
diff --git a/src/renderer/components/+extensions/notice.tsx b/src/renderer/components/+extensions/notice.tsx
index 511388a09b..e72fa55eef 100644
--- a/src/renderer/components/+extensions/notice.tsx
+++ b/src/renderer/components/+extensions/notice.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./notice.module.css";
+import styles from "./notice.module.scss";
 import React, { DOMAttributes } from "react";
 import { cssNames } from "../../utils";
 
diff --git a/src/renderer/components/+network-policies/network-policy-details.module.css b/src/renderer/components/+network-policies/network-policy-details.module.scss
similarity index 100%
rename from src/renderer/components/+network-policies/network-policy-details.module.css
rename to src/renderer/components/+network-policies/network-policy-details.module.scss
diff --git a/src/renderer/components/+network-policies/network-policy-details.tsx b/src/renderer/components/+network-policies/network-policy-details.tsx
index ff870bc2cc..21ca1f1191 100644
--- a/src/renderer/components/+network-policies/network-policy-details.tsx
+++ b/src/renderer/components/+network-policies/network-policy-details.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./network-policy-details.module.css";
+import styles from "./network-policy-details.module.scss";
 
 import React from "react";
 import { DrawerItem, DrawerTitle } from "../drawer";
diff --git a/src/renderer/components/+preferences/helm-charts.module.css b/src/renderer/components/+preferences/helm-charts.module.scss
similarity index 100%
rename from src/renderer/components/+preferences/helm-charts.module.css
rename to src/renderer/components/+preferences/helm-charts.module.scss
diff --git a/src/renderer/components/+preferences/helm-charts.tsx b/src/renderer/components/+preferences/helm-charts.tsx
index 5119e3d86c..028b3bc763 100644
--- a/src/renderer/components/+preferences/helm-charts.tsx
+++ b/src/renderer/components/+preferences/helm-charts.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./helm-charts.module.css";
+import styles from "./helm-charts.module.scss";
 
 import React from "react";
 import { action, computed, observable, makeObservable } from "mobx";
diff --git a/src/renderer/components/+preferences/removable-item.module.css b/src/renderer/components/+preferences/removable-item.module.scss
similarity index 100%
rename from src/renderer/components/+preferences/removable-item.module.css
rename to src/renderer/components/+preferences/removable-item.module.scss
diff --git a/src/renderer/components/+preferences/removable-item.tsx b/src/renderer/components/+preferences/removable-item.tsx
index 131974f4d1..aeb68c1d33 100644
--- a/src/renderer/components/+preferences/removable-item.tsx
+++ b/src/renderer/components/+preferences/removable-item.tsx
@@ -18,7 +18,7 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import styles from "./removable-item.module.css";
+import styles from "./removable-item.module.scss";
 
 import React, { DOMAttributes } from "react";
 
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index feba4d8666..0482dd0dd8 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -19,9 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@import "tailwindcss/utilities";
-@import "~flex.box";
-@import "fonts";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "~flex.box"; // todo: replace with tailwind's flexbox classes
+@import "./fonts";
 @import "../themes/theme-vars";
 
 :root {
diff --git a/src/renderer/components/avatar/avatar.module.css b/src/renderer/components/avatar/avatar.module.scss
similarity index 100%
rename from src/renderer/components/avatar/avatar.module.css
rename to src/renderer/components/avatar/avatar.module.scss
diff --git a/src/renderer/components/avatar/avatar.tsx b/src/renderer/components/avatar/avatar.tsx
index 605652e99a..597c5c36f7 100644
--- a/src/renderer/components/avatar/avatar.tsx
+++ b/src/renderer/components/avatar/avatar.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./avatar.module.css";
+import styles from "./avatar.module.scss";
 
 import React, { HTMLAttributes, ImgHTMLAttributes } from "react";
 import randomColor from "randomcolor";
diff --git a/src/renderer/components/badge/badge.module.css b/src/renderer/components/badge/badge.module.scss
similarity index 100%
rename from src/renderer/components/badge/badge.module.css
rename to src/renderer/components/badge/badge.module.scss
diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx
index fe722c3032..05588db58a 100644
--- a/src/renderer/components/badge/badge.tsx
+++ b/src/renderer/components/badge/badge.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./badge.module.css";
+import styles from "./badge.module.scss";
 
 import React from "react";
 import { computed, makeObservable, observable } from "mobx";
diff --git a/src/renderer/components/cluster-manager/bottom-bar.module.css b/src/renderer/components/cluster-manager/bottom-bar.module.scss
similarity index 100%
rename from src/renderer/components/cluster-manager/bottom-bar.module.css
rename to src/renderer/components/cluster-manager/bottom-bar.module.scss
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index 27b5a10f3f..3213bcc0cc 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./bottom-bar.module.css";
+import styles from "./bottom-bar.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
diff --git a/src/renderer/components/cluster-manager/cluster-status.module.css b/src/renderer/components/cluster-manager/cluster-status.module.scss
similarity index 100%
rename from src/renderer/components/cluster-manager/cluster-status.module.css
rename to src/renderer/components/cluster-manager/cluster-status.module.scss
diff --git a/src/renderer/components/cluster-manager/cluster-status.tsx b/src/renderer/components/cluster-manager/cluster-status.tsx
index 79df15c412..5b7e73510c 100644
--- a/src/renderer/components/cluster-manager/cluster-status.tsx
+++ b/src/renderer/components/cluster-manager/cluster-status.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./cluster-status.module.css";
+import styles from "./cluster-status.module.scss";
 
 import { computed, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
diff --git a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.module.css b/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.module.scss
similarity index 100%
rename from src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.module.css
rename to src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.module.scss
diff --git a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx b/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx
index c677a8995c..1a2fbb0506 100644
--- a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx
+++ b/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx
@@ -18,7 +18,7 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import styles from "./delete-cluster-dialog.module.css";
+import styles from "./delete-cluster-dialog.module.scss";
 
 import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
diff --git a/src/renderer/components/dock/editor-panel.module.css b/src/renderer/components/dock/editor-panel.module.scss
similarity index 100%
rename from src/renderer/components/dock/editor-panel.module.css
rename to src/renderer/components/dock/editor-panel.module.scss
diff --git a/src/renderer/components/dock/editor-panel.tsx b/src/renderer/components/dock/editor-panel.tsx
index dcf3197b2f..df9cc15e10 100644
--- a/src/renderer/components/dock/editor-panel.tsx
+++ b/src/renderer/components/dock/editor-panel.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./editor-panel.module.css";
+import styles from "./editor-panel.module.scss";
 import throttle from "lodash/throttle";
 import React from "react";
 import { makeObservable, observable, reaction } from "mobx";
diff --git a/src/renderer/components/hotbar/hotbar-entity-icon.module.css b/src/renderer/components/hotbar/hotbar-entity-icon.module.scss
similarity index 100%
rename from src/renderer/components/hotbar/hotbar-entity-icon.module.css
rename to src/renderer/components/hotbar/hotbar-entity-icon.module.scss
diff --git a/src/renderer/components/hotbar/hotbar-entity-icon.tsx b/src/renderer/components/hotbar/hotbar-entity-icon.tsx
index e889306c41..56826a747b 100644
--- a/src/renderer/components/hotbar/hotbar-entity-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-entity-icon.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./hotbar-entity-icon.module.css";
+import styles from "./hotbar-entity-icon.module.scss";
 
 import React, { HTMLAttributes } from "react";
 import { makeObservable, observable } from "mobx";
diff --git a/src/renderer/components/hotbar/hotbar-icon.module.css b/src/renderer/components/hotbar/hotbar-icon.module.scss
similarity index 100%
rename from src/renderer/components/hotbar/hotbar-icon.module.css
rename to src/renderer/components/hotbar/hotbar-icon.module.scss
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index 0cd746b72f..6e2eead049 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./hotbar-icon.module.css";
+import styles from "./hotbar-icon.module.scss";
 
 import React, { useState } from "react";
 
diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.css b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.scss
similarity index 100%
rename from src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.css
rename to src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.scss
diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
index 02a240043a..8ea0c420f8 100644
--- a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
+++ b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./kubeconfig-dialog.module.css";
+import styles from "./kubeconfig-dialog.module.scss";
 import React from "react";
 import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
diff --git a/src/renderer/components/layout/main-layout.module.css b/src/renderer/components/layout/main-layout.module.scss
similarity index 100%
rename from src/renderer/components/layout/main-layout.module.css
rename to src/renderer/components/layout/main-layout.module.scss
diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx
index e8316bfd3c..2c409d9ca2 100755
--- a/src/renderer/components/layout/main-layout.tsx
+++ b/src/renderer/components/layout/main-layout.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./main-layout.module.css";
+import styles from "./main-layout.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
diff --git a/src/renderer/components/layout/sidebar-cluster.module.css b/src/renderer/components/layout/sidebar-cluster.module.scss
similarity index 100%
rename from src/renderer/components/layout/sidebar-cluster.module.css
rename to src/renderer/components/layout/sidebar-cluster.module.scss
diff --git a/src/renderer/components/layout/sidebar-cluster.tsx b/src/renderer/components/layout/sidebar-cluster.tsx
index a4479f1a24..83a337a590 100644
--- a/src/renderer/components/layout/sidebar-cluster.tsx
+++ b/src/renderer/components/layout/sidebar-cluster.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./sidebar-cluster.module.css";
+import styles from "./sidebar-cluster.module.scss";
 import { observable } from "mobx";
 import React, { useState } from "react";
 import { HotbarStore } from "../../../common/hotbar-store";
diff --git a/src/renderer/components/layout/sidebar.module.css b/src/renderer/components/layout/sidebar.module.scss
similarity index 100%
rename from src/renderer/components/layout/sidebar.module.css
rename to src/renderer/components/layout/sidebar.module.scss
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index bd4c4ec661..58d388242c 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./sidebar.module.css";
+import styles from "./sidebar.module.scss";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.scss
similarity index 100%
rename from src/renderer/components/layout/topbar.module.css
rename to src/renderer/components/layout/topbar.module.scss
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index af47fd2548..4705c6993c 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./topbar.module.css";
+import styles from "./topbar.module.scss";
 import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
diff --git a/src/renderer/components/list/list.module.css b/src/renderer/components/list/list.module.scss
similarity index 100%
rename from src/renderer/components/list/list.module.css
rename to src/renderer/components/list/list.module.scss
diff --git a/src/renderer/components/list/list.tsx b/src/renderer/components/list/list.tsx
index 0cff4c7e2e..38ce0f3a37 100644
--- a/src/renderer/components/list/list.tsx
+++ b/src/renderer/components/list/list.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./list.module.css";
+import styles from "./list.module.scss";
 import React, { useState } from "react";
 import { SearchInput } from "../input";
 
diff --git a/src/renderer/components/monaco-editor/monaco-editor.module.css b/src/renderer/components/monaco-editor/monaco-editor.module.scss
similarity index 100%
rename from src/renderer/components/monaco-editor/monaco-editor.module.css
rename to src/renderer/components/monaco-editor/monaco-editor.module.scss
diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx
index e01ce37479..96301e8a7f 100644
--- a/src/renderer/components/monaco-editor/monaco-editor.tsx
+++ b/src/renderer/components/monaco-editor/monaco-editor.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./monaco-editor.module.css";
+import styles from "./monaco-editor.module.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
diff --git a/src/renderer/components/table/react-table.module.css b/src/renderer/components/table/react-table.module.scss
similarity index 100%
rename from src/renderer/components/table/react-table.module.css
rename to src/renderer/components/table/react-table.module.scss
diff --git a/src/renderer/components/table/react-table.tsx b/src/renderer/components/table/react-table.tsx
index 27b19f50dd..de001c2a9c 100644
--- a/src/renderer/components/table/react-table.tsx
+++ b/src/renderer/components/table/react-table.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./react-table.module.css";
+import styles from "./react-table.module.scss";
 import React from "react";
 import { useCallback, useMemo } from "react";
 import { useFlexLayout, useSortBy, useTable, UseTableOptions } from "react-table";
diff --git a/tailwind.config.js b/tailwind.config.js
index 040f2dce23..1d2f2c9506 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,8 +20,7 @@
  */
 
 module.exports = {
-  mode: "jit",
-  purge: ["src/**/*.tsx"],
+  content: ["src/**/*.tsx"],
   darkMode: "class",
   theme: {
     fontFamily: {
diff --git a/types/mocks.d.ts b/types/mocks.d.ts
index 57e2812dcb..8b26cb3a03 100644
--- a/types/mocks.d.ts
+++ b/types/mocks.d.ts
@@ -29,6 +29,14 @@ declare const __static: string;
 
 // Support import for custom module extensions
 // https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
 declare module "*.scss" {
   const content: string;
   export = content;
@@ -37,7 +45,3 @@ declare module "*.ttf" {
   const content: string;
   export = content;
 }
-declare module "*.module.css" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
diff --git a/webpack.extensions.ts b/webpack.extensions.ts
index 7b7e876fdc..c8d058401e 100644
--- a/webpack.extensions.ts
+++ b/webpack.extensions.ts
@@ -89,14 +89,13 @@ export default function generateExtensionTypes(): webpack.Configuration {
         {
           test: /\.s?css$/,
           use: [
-            // creates `style` nodes from JS strings
             "style-loader",
-            // translates CSS into CommonJS
             "css-loader",
+            "postcss-loader",
             {
               loader: "sass-loader",
               options: {
-                prependData: `@import "${path.basename(sassCommonVars)}";`,
+                additionalData: `@import "${path.basename(sassCommonVars)}";`,
                 sassOptions: {
                   includePaths: [
                     path.dirname(sassCommonVars),
diff --git a/webpack.renderer.ts b/webpack.renderer.ts
index 5ade45b6d3..4e07d42ffb 100755
--- a/webpack.renderer.ts
+++ b/webpack.renderer.ts
@@ -119,21 +119,30 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
             {
               loader: "css-loader",
               options: {
+                sourceMap: isDevelopment,
                 modules: {
-                  auto: true,
-                  mode: "local",
+                  auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
+                  mode: "local", // :local(.selector) by default
                   localIdentName: "[name]__[local]--[hash:base64:5]",
                 },
               },
             },
             {
               loader: "postcss-loader",
+              options: {
+                sourceMap: isDevelopment,
+                postcssOptions: {
+                  plugins: [
+                    "tailwindcss",
+                  ],
+                },
+              },
             },
             {
               loader: "sass-loader",
               options: {
                 sourceMap: isDevelopment,
-                prependData: `@import "${path.basename(sassCommonVars)}";`,
+                additionalData: `@import "${path.basename(sassCommonVars)}";`,
                 sassOptions: {
                   includePaths: [
                     path.dirname(sassCommonVars),
@@ -158,21 +167,6 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
         globalAPI: isDevelopment,
       }),
 
-      // todo: fix remain warnings about circular dependencies
-      // new CircularDependencyPlugin({
-      //   cwd: __dirname,
-      //   exclude: /node_modules/,
-      //   allowAsyncCycles: true,
-      //   failOnError: false,
-      // }),
-
-      // todo: check if this actually works in mode=production files
-      // new webpack.DllReferencePlugin({
-      //   context: process.cwd(),
-      //   manifest: manifestPath,
-      //   sourceType: libraryTarget,
-      // }),
-
       new HtmlWebpackPlugin({
         filename: `${appName}.html`,
         template: htmlTemplate,
diff --git a/yarn.lock b/yarn.lock
index e791116113..43abd52c52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3356,7 +3356,7 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.1.0, bytes@^3.0.0:
+bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -3747,15 +3747,6 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-clone-deep@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
-  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
-  dependencies:
-    is-plain-object "^2.0.4"
-    kind-of "^6.0.2"
-    shallow-clone "^3.0.0"
-
 clone-response@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
@@ -3915,11 +3906,6 @@ commander@^5.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
-commander@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
-  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
-
 commander@^8.2.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -4283,11 +4269,6 @@ css-box-model@^1.2.0:
   dependencies:
     tiny-invariant "^1.0.6"
 
-css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
 css-loader@^5.2.7:
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.7.tgz#9b9f111edf6fb2be5dc62525644cbc9c232064ae"
@@ -4329,11 +4310,6 @@ css-selector-tokenizer@^0.7.0:
     cssesc "^3.0.0"
     fastparse "^1.1.2"
 
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 css-vendor@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
@@ -6478,7 +6454,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -6820,11 +6796,6 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
 history@^4.10.1, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -6882,16 +6853,6 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -6922,11 +6883,6 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
 html-webpack-plugin@^4.5.2:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz#76fc83fa1a0f12dd5f7da0404a54e2699666bc12"
@@ -7476,18 +7432,6 @@ is-cidr@^3.0.0:
   dependencies:
     cidr-regex "^2.0.10"
 
-is-color-stop@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
 is-core-module@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
@@ -8686,9 +8630,9 @@ kleur@^3.0.3:
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
 klona@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
-  integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
+  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
 kuler@^2.0.0:
   version "2.0.0"
@@ -9059,11 +9003,6 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
-
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -9583,11 +9522,6 @@ mock-fs@^5.1.2:
   resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-5.1.2.tgz#6fa486e06d00f8793a8d2228de980eff93ce6db7"
   integrity sha512-YkjQkdLulFrz0vD4BfNQdQRVmgycXTV7ykuHMlyv+C8WCHazpkiQRDthwa02kSyo8wKnY9wRptHfQLgmf0eR+A==
 
-modern-normalize@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
-  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
-
 moment-timezone@^0.5.34:
   version "0.5.34"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.34.tgz#a75938f7476b88f155d3504a9343f7519d9a405c"
@@ -9727,6 +9661,11 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -9757,13 +9696,6 @@ node-addon-api@^4.2.0:
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-4.2.0.tgz#117cbb5a959dff0992e1c586ae0393573e4d2a87"
   integrity sha512-eazsqzwG2lskuzBqCGPi7Ac2UgOoMz8JVOXVhTvvPDYhthvNpefx8jWD8Np7Gv+2Sz0FlPWZk0nJV0z598Wn8Q==
 
-node-emoji@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
-  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
-  dependencies:
-    lodash "^4.17.21"
-
 node-fetch-npm@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz#6507d0e17a9ec0be3bec516958a497cec54bf5a4"
@@ -11018,7 +10950,7 @@ postcss-load-config@^3.0.1, postcss-load-config@^3.1.0:
     lilconfig "^2.0.3"
     yaml "^1.10.2"
 
-postcss-loader@4.3.0:
+postcss-loader@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.3.0.tgz#2c4de9657cd4f07af5ab42bd60a673004da1b8cc"
   integrity sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==
@@ -11072,6 +11004,14 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.0.7:
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.7.tgz#48404830a635113a71fd79397de8209ed05a66fc"
+  integrity sha512-U+b/Deoi4I/UmE6KOVPpnhS7I7AYdKbhGcat+qTQ27gycvaACvNEw11ba6RrkwVmDVRW7sigWgLj4/KbbJjeDA==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
@@ -11082,6 +11022,11 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@^6.0.14, postcss@^6.0.2:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
@@ -11091,7 +11036,7 @@ postcss@^6.0.14, postcss@^6.0.2:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.3.0, postcss@^8.4.5:
+postcss@^8.1.6, postcss@^8.2.15, postcss@^8.3.0, postcss@^8.4.5:
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
   integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
@@ -11100,11 +11045,6 @@ postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.3.0, postcss@^8.4.5:
     picocolors "^1.0.0"
     source-map-js "^1.0.1"
 
-postinstall-postinstall@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"
-  integrity sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ==
-
 prebuild-install@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.0.tgz#3c5ce3902f1cb9d6de5ae94ca53575e4af0c1574"
@@ -11172,11 +11112,6 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -11365,16 +11300,6 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
-purgecss@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
-  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
-  dependencies:
-    commander "^6.0.0"
-    glob "^7.0.0"
-    postcss "^8.2.1"
-    postcss-selector-parser "^6.0.2"
-
 qrcode-terminal@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819"
@@ -11814,14 +11739,6 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 redux@^4.0.0, redux@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
@@ -12113,16 +12030,6 @@ rfc6902@^4.0.2:
   resolved "https://registry.yarnpkg.com/rfc6902/-/rfc6902-4.0.2.tgz#ce99d3562b9e3287d403462e6bcc81eead8fcea0"
   integrity sha512-MJOC4iDSv3Qn5/QvhPbrNoRongti6moXSShcRmtbNqOk0WPxlviEdMV4bb9PaULhSxLUXzWd4AjAMKQ3j3y54w==
 
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
 rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -12225,18 +12132,18 @@ sanitize-filename@^1.6.2, sanitize-filename@^1.6.3:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
-sass-loader@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
-  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+sass-loader@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716"
+  integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==
   dependencies:
-    clone-deep "^4.0.1"
-    loader-utils "^1.2.3"
-    neo-async "^2.6.1"
-    schema-utils "^2.6.1"
-    semver "^6.3.0"
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
 
-sass@^1.32.13, sass@^1.44.0:
+sass@^1.32.13:
   version "1.44.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.44.0.tgz#619aa0a2275c097f9af5e6b8fe8a95e3056430fb"
   integrity sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw==
@@ -12244,6 +12151,15 @@ sass@^1.32.13, sass@^1.44.0:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
 
+sass@^1.45.1:
+  version "1.45.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.1.tgz#fa03951f924d1ba5762949567eaf660e608a1ab0"
+  integrity sha512-pwPRiq29UR0o4X3fiQyCtrESldXvUQAAE0QmcJTpsI4kuHHcLzZ54M1oNBVIXybQv8QF2zfkpFcTxp8ta97dUA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -12282,7 +12198,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.1, schema-utils@^2.6.5:
+schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -12454,13 +12370,6 @@ sha@^3.0.0:
   dependencies:
     graceful-fs "^4.1.2"
 
-shallow-clone@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
-  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
-  dependencies:
-    kind-of "^6.0.2"
-
 sharp@^0.29.3:
   version "0.29.3"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.29.3.tgz#0da183d626094c974516a48fab9b3e4ba92eb5c2"
@@ -12704,7 +12613,7 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
   integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
@@ -13259,41 +13168,30 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@^2.2.19:
-  version "2.2.19"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.19.tgz#540e464832cd462bb9649c1484b0a38315c2653c"
-  integrity sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==
+tailwindcss@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.7.tgz#15936881f042a7eb8d6f2b6a454bac9f51181bbd"
+  integrity sha512-rZdKNHtC64jcQncLoWOuCzj4lQDTAgLtgK3WmQS88tTdpHh9OwLqULTQxI3tw9AMJsqSpCKlmcjW/8CSnni6zQ==
   dependencies:
     arg "^5.0.1"
-    bytes "^3.0.0"
     chalk "^4.1.2"
     chokidar "^3.5.2"
-    color "^4.0.1"
+    color-name "^1.1.4"
     cosmiconfig "^7.0.1"
     detective "^5.2.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.7"
-    fs-extra "^10.0.0"
-    glob-parent "^6.0.1"
-    html-tags "^3.1.0"
-    is-color-stop "^1.1.0"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.11.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
     normalize-path "^3.0.0"
     object-hash "^2.2.0"
     postcss-js "^3.0.3"
     postcss-load-config "^3.1.0"
     postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    purgecss "^4.0.3"
+    postcss-selector-parser "^6.0.7"
+    postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
     resolve "^1.20.0"
     tmp "^0.2.1"