diff --git a/apps/browser/postcss.config.js b/apps/browser/postcss.config.js
new file mode 100644
index 0000000000..c4513687e8
--- /dev/null
+++ b/apps/browser/postcss.config.js
@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+};
diff --git a/apps/browser/src/popup/main.ts b/apps/browser/src/popup/main.ts
index 0772f3c7f0..ef69e0342f 100644
--- a/apps/browser/src/popup/main.ts
+++ b/apps/browser/src/popup/main.ts
@@ -4,6 +4,7 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import BrowserPlatformUtilsService from "../platform/services/browser-platform-utils.service";
 
 require("./scss/popup.scss");
+require("./scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 
diff --git a/apps/browser/src/popup/scss/tailwind.css b/apps/browser/src/popup/scss/tailwind.css
new file mode 100644
index 0000000000..7e12c1d677
--- /dev/null
+++ b/apps/browser/src/popup/scss/tailwind.css
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../../../../../libs/components/src/tw-theme.css";
diff --git a/apps/browser/tailwind.config.js b/apps/browser/tailwind.config.js
new file mode 100644
index 0000000000..affbddf2b2
--- /dev/null
+++ b/apps/browser/tailwind.config.js
@@ -0,0 +1,6 @@
+/* eslint-disable no-undef, @typescript-eslint/no-var-requires */
+const config = require("../../libs/components/tailwind.config.base");
+
+config.content = ["./src/**/*.{html,ts}", "../../libs/components/src/**/*.{html,ts}"];
+
+module.exports = config;
diff --git a/apps/browser/tsconfig.json b/apps/browser/tsconfig.json
index 7744c082f1..6c5e4330b7 100644
--- a/apps/browser/tsconfig.json
+++ b/apps/browser/tsconfig.json
@@ -10,8 +10,9 @@
     "sourceMap": true,
     "baseUrl": ".",
     "paths": {
-      "@bitwarden/common/*": ["../../libs/common/src/*"],
       "@bitwarden/angular/*": ["../../libs/angular/src/*"],
+      "@bitwarden/common/*": ["../../libs/common/src/*"],
+      "@bitwarden/components": ["../../libs/components/src"],
       "@bitwarden/exporter/*": ["../../libs/exporter/src/*"]
     },
     "useDefineForClassFields": false
diff --git a/apps/browser/webpack.config.js b/apps/browser/webpack.config.js
index 992462b615..231b9ab156 100644
--- a/apps/browser/webpack.config.js
+++ b/apps/browser/webpack.config.js
@@ -42,6 +42,16 @@ const moduleRules = [
     },
     type: "asset/resource",
   },
+  {
+    test: /\.css$/,
+    use: [
+      {
+        loader: MiniCssExtractPlugin.loader,
+      },
+      "css-loader",
+      "postcss-loader",
+    ],
+  },
   {
     test: /\.scss$/,
     use: [
diff --git a/apps/desktop/postcss.config.js b/apps/desktop/postcss.config.js
new file mode 100644
index 0000000000..c4513687e8
--- /dev/null
+++ b/apps/desktop/postcss.config.js
@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+};
diff --git a/apps/desktop/src/app/main.ts b/apps/desktop/src/app/main.ts
index 9385f859b1..7d99e48ea2 100644
--- a/apps/desktop/src/app/main.ts
+++ b/apps/desktop/src/app/main.ts
@@ -3,8 +3,8 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
 import { isDev } from "../utils";
 
-// tslint:disable-next-line
 require("../scss/styles.scss");
+require("../scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 
diff --git a/apps/desktop/src/scss/tailwind.css b/apps/desktop/src/scss/tailwind.css
new file mode 100644
index 0000000000..e58785aecb
--- /dev/null
+++ b/apps/desktop/src/scss/tailwind.css
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../../../../libs/components/src/tw-theme.css";
diff --git a/apps/desktop/tailwind.config.js b/apps/desktop/tailwind.config.js
new file mode 100644
index 0000000000..affbddf2b2
--- /dev/null
+++ b/apps/desktop/tailwind.config.js
@@ -0,0 +1,6 @@
+/* eslint-disable no-undef, @typescript-eslint/no-var-requires */
+const config = require("../../libs/components/tailwind.config.base");
+
+config.content = ["./src/**/*.{html,ts}", "../../libs/components/src/**/*.{html,ts}"];
+
+module.exports = config;
diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json
index 3721d4f211..bf55862559 100644
--- a/apps/desktop/tsconfig.json
+++ b/apps/desktop/tsconfig.json
@@ -10,8 +10,9 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@bitwarden/common/*": ["../../libs/common/src/*"],
       "@bitwarden/angular/*": ["../../libs/angular/src/*"],
+      "@bitwarden/common/*": ["../../libs/common/src/*"],
+      "@bitwarden/components": ["../../libs/components/src"],
       "@bitwarden/exporter/*": ["../../libs/exporter/src/*"]
     },
     "useDefineForClassFields": false
diff --git a/apps/desktop/webpack.renderer.js b/apps/desktop/webpack.renderer.js
index 9763fae5b2..64eef5729f 100644
--- a/apps/desktop/webpack.renderer.js
+++ b/apps/desktop/webpack.renderer.js
@@ -109,6 +109,16 @@ const renderer = {
         },
         type: "asset/resource",
       },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          "css-loader",
+          "postcss-loader",
+        ],
+      },
       {
         test: /\.scss$/,
         use: [
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css
index 4289917cfb..e58785aecb 100644
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -3,41 +3,3 @@
 @tailwind utilities;
 
 @import "../../../../libs/components/src/tw-theme.css";
-
-/** 
- * tw-break-words does not work with table cells:
- * https://github.com/tailwindlabs/tailwindcss/issues/835
- */
-td.tw-break-words {
-  overflow-wrap: anywhere;
-}
-
-/** 
- * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
- * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
- */
-summary.tw-list-none::marker,
-summary.tw-list-none::-webkit-details-marker {
-  display: none;
-}
-
-/** 
- * Arbitrary values can't be used with `text-align`:
- * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
- */
-.tw-text-unset {
-  text-align: unset;
-}
-
-/**
- * Bootstrap uses z-index: 1050 for modals, dialogs should appear above them.
- * Remove once bootstrap is removed from our codebase.
- * CL-XYZ
- */
-.cdk-overlay-container,
-.cdk-global-overlay-wrapper,
-.cdk-overlay-connected-position-bounding-box,
-.cdk-overlay-backdrop,
-.cdk-overlay-pane {
-  z-index: 2000 !important;
-}
diff --git a/libs/components/src/search/close-button-white.svg b/libs/components/src/search/close-button.svg
similarity index 100%
rename from libs/components/src/search/close-button-white.svg
rename to libs/components/src/search/close-button.svg
diff --git a/libs/components/src/search/search.component.css b/libs/components/src/search/search.component.css
index 87c38348bc..35304438a8 100644
--- a/libs/components/src/search/search.component.css
+++ b/libs/components/src/search/search.component.css
@@ -9,8 +9,8 @@ bit-search input[type="search"]::-webkit-search-cancel-button {
   margin: 0;
   cursor: pointer;
   background-repeat: no-repeat;
-  mask-image: url("./close-button-white.svg");
-  -webkit-mask-image: url("./close-button-white.svg");
+  mask-image: url("./close-button.svg");
+  -webkit-mask-image: url("./close-button.svg");
   background-color: rgba(var(--color-text-muted));
 }
 
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 2a59fe2e93..420b2cfd48 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -159,3 +159,41 @@
 }
 
 @import "./search/search.component.css";
+
+/** 
+ * tw-break-words does not work with table cells:
+ * https://github.com/tailwindlabs/tailwindcss/issues/835
+ */
+td.tw-break-words {
+  overflow-wrap: anywhere;
+}
+
+/** 
+ * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
+ * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
+ */
+summary.tw-list-none::marker,
+summary.tw-list-none::-webkit-details-marker {
+  display: none;
+}
+
+/** 
+ * Arbitrary values can't be used with `text-align`:
+ * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
+ */
+.tw-text-unset {
+  text-align: unset;
+}
+
+/**
+ * Bootstrap uses z-index: 1050 for modals, dialogs should appear above them.
+ * Remove once bootstrap is removed from our codebase.
+ * CL-XYZ
+ */
+.cdk-overlay-container,
+.cdk-global-overlay-wrapper,
+.cdk-overlay-connected-position-bounding-box,
+.cdk-overlay-backdrop,
+.cdk-overlay-pane {
+  z-index: 2000 !important;
+}