[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

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));
 }
 

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;
+}