[PM-2237] Add tailwind to desktop & browser (#5326)

* Add tailwind to desktop

* Add tailwind to browser

* Toy around with using CL in desktop

* Move custom css into the tailwind theme

* Revert component experiment

* Add components to browser tsconfig

* Fix build

apps/browser/postcss.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+};

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";
 

apps/browser/src/popup/scss/tailwind.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../../../../../libs/components/src/tw-theme.css";

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;

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

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: [