diff --git a/package.json b/package.json
index a16ba40..7be2ece 100644
--- a/package.json
+++ b/package.json
@@ -93,10 +93,13 @@
     "@typescript-eslint/parser": "^6.4.1",
     "@vitejs/plugin-react": "^4.2.0",
     "@webbtc/webln-types": "^1.0.12",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.48.0",
     "eslint-plugin-formatjs": "^4.11.3",
+    "postcss": "^8.4.32",
     "prettier": "^2.8.8",
     "prop-types": "^15.8.1",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.5",
     "vite-plugin-pwa": "^0.17.2",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/element/content-warning.tsx b/src/element/content-warning.tsx
index b3f99c6..731238d 100644
--- a/src/element/content-warning.tsx
+++ b/src/element/content-warning.tsx
@@ -24,7 +24,7 @@ export function ContentWarningOverlay() {
       <h2>
         <FormattedMessage defaultMessage="Confirm your age" id="s7V+5p" />
       </h2>
-      <div className="flex g24">
+      <div className="flex gap-3">
         <button className="btn btn-warning" onClick={grownUp}>
           <FormattedMessage defaultMessage="Yes, I am over 18" id="O2Cy6m" />
         </button>
diff --git a/src/element/login-signup.tsx b/src/element/login-signup.tsx
index 0a7f997..effb7d8 100644
--- a/src/element/login-signup.tsx
+++ b/src/element/login-signup.tsx
@@ -216,9 +216,9 @@ export function LoginSignup({ close }: { close: () => void }) {
                 placeholder={formatMessage({ defaultMessage: "eg. nsec1xyz", id: "yzKwBQ" })}
               />
             </div>
-            <div className="flex f-space">
+            <div className="flex justify-between">
               <div></div>
-              <div className="flex g8">
+              <div className="flex gap-1">
                 <button
                   type="button"
                   className="btn btn-secondary"
@@ -246,7 +246,7 @@ export function LoginSignup({ close }: { close: () => void }) {
             <h2>
               <FormattedMessage defaultMessage="Setup Profile" id="nOaArs" />
             </h2>
-            <div className="flex f-center">
+            <div className="flex items-center">
               <div
                 className="avatar-input"
                 onClick={uploadAvatar}
diff --git a/src/element/new-stream.tsx b/src/element/new-stream.tsx
index fbece3e..a24eb47 100644
--- a/src/element/new-stream.tsx
+++ b/src/element/new-stream.tsx
@@ -67,7 +67,7 @@ function NewStream({ ev, onFinish }: StreamEditorProps) {
       <p>
         <FormattedMessage defaultMessage="Stream Providers" id="6Z2pvJ" />
       </p>
-      <div className="flex g12">
+      <div className="flex gap-2">
         {providers.map(v => (
           <span className={`pill${v === currentProvider ? " active" : ""}`} onClick={() => setCurrentProvider(v)}>
             {v.name}
diff --git a/src/element/nostr-provider-dialog.tsx b/src/element/nostr-provider-dialog.tsx
index 804a6ed..84d09f4 100644
--- a/src/element/nostr-provider-dialog.tsx
+++ b/src/element/nostr-provider-dialog.tsx
@@ -88,7 +88,7 @@ export function NostrProviderDialog({ provider, showEndpoints, ...others }: { pr
     return (
       <>
         <div>
-          <div className="flex g12">
+          <div className="flex gap-2">
             <input type="checkbox" checked={tos} onChange={e => setTos(e.target.checked)} />
             <p>
               <FormattedMessage
@@ -125,7 +125,7 @@ export function NostrProviderDialog({ provider, showEndpoints, ...others }: { pr
           <p>
             <FormattedMessage defaultMessage="Endpoint" id="ljmS5P" />
           </p>
-          <div className="flex g12">
+          <div className="flex gap-2">
             {sortEndpoints(info.endpoints).map(a => (
               <span className={`pill${ep?.name === a.name ? " active" : ""}`} onClick={() => setEndpoint(a)}>
                 {a.name}
@@ -146,8 +146,8 @@ export function NostrProviderDialog({ provider, showEndpoints, ...others }: { pr
         <p>
           <FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
         </p>
-        <div className="flex g12">
-          <div className="paper f-grow">
+        <div className="flex gap-2">
+          <div className="paper grow">
             <input type="password" value={ep?.key} disabled />
           </div>
           <button className="btn btn-primary" onClick={() => window.navigator.clipboard.writeText(ep?.key ?? "")}>
@@ -159,8 +159,8 @@ export function NostrProviderDialog({ provider, showEndpoints, ...others }: { pr
         <p>
           <FormattedMessage defaultMessage="Balance" id="H5+NAX" />
         </p>
-        <div className="flex g12">
-          <div className="paper f-grow">
+        <div className="flex gap-2">
+          <div className="paper grow">
             <FormattedMessage
               defaultMessage="{amount} sats"
               id="vrTOHJ"
@@ -179,7 +179,7 @@ export function NostrProviderDialog({ provider, showEndpoints, ...others }: { pr
         <p>
           <FormattedMessage defaultMessage="Resolutions" id="4uI538" />
         </p>
-        <div className="flex g12">
+        <div className="flex gap-2">
           {ep?.capabilities?.map(a => (
             <span className="pill">{parseCapability(a)}</span>
           ))}
diff --git a/src/element/send-zap.tsx b/src/element/send-zap.tsx
index cf5c22d..e452dd7 100644
--- a/src/element/send-zap.tsx
+++ b/src/element/send-zap.tsx
@@ -109,7 +109,7 @@ export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish }: Se
     if (invoice) return;
     return (
       <>
-        <div className="flex g12">
+        <div className="flex gap-2">
           <span
             className={`pill${isFiat ? "" : " active"}`}
             onClick={() => {
@@ -182,7 +182,7 @@ export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish }: Se
     return (
       <>
         <QrCode data={link} link={link} />
-        <div className="flex f-center">
+        <div className="flex items-center">
           <Copy text={invoice} />
         </div>
         <button className="btn btn-primary wide" onClick={() => onFinish()}>
diff --git a/src/element/stream-editor.tsx b/src/element/stream-editor.tsx
index db4603b..31b9c8a 100644
--- a/src/element/stream-editor.tsx
+++ b/src/element/stream-editor.tsx
@@ -195,7 +195,7 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
             <p>
               <FormattedMessage defaultMessage="Status" id="tzMNF3" />
             </p>
-            <div className="flex g12">
+            <div className="flex gap-2">
               {[StreamState.Live, StreamState.Planned, StreamState.Ended].map(v => (
                 <span className={`pill${status === v ? " active" : ""}`} onClick={() => setStatus(v)} key={v}>
                   {v}
@@ -243,7 +243,7 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
         </>
       )}
       {(options?.canSetContentWarning ?? true) && (
-        <div className="flex g12 content-warning">
+        <div className="flex gap-2 content-warning">
           <div>
             <input type="checkbox" checked={contentWarning} onChange={e => setContentWarning(e.target.checked)} />
           </div>
diff --git a/src/index.css b/src/index.css
index 9e740d9..b063cf9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: "Outfit", sans-serif;
@@ -31,6 +35,19 @@ body {
   }
 }
 
+h1 {
+  font-size: 32px;
+}
+h2 {
+  font-size: 28px;
+}
+h3 {
+  font-size: 21px;
+}
+h4 {
+  font-size: 18px;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
@@ -44,37 +61,6 @@ a {
   outline: none;
 }
 
-.flex {
-  display: flex;
-}
-
-.f-1 {
-  flex: 1;
-}
-
-.f-grow {
-  flex-grow: 1;
-}
-
-.f-col {
-  flex-direction: column;
-}
-
-.f-center {
-  align-items: center;
-  justify-content: center;
-}
-
-.f-space {
-  justify-content: space-between;
-}
-
-@media (max-width: 1020px) {
-  .f-col-mobile {
-    flex-direction: column;
-  }
-}
-
 .pill {
   background: #171717;
   padding: 4px 8px;
@@ -91,29 +77,12 @@ a {
   color: white;
 }
 
-.g8 {
-  gap: 8px;
-}
-.g12 {
-  gap: 12px;
-}
-.g24 {
-  gap: 24px;
-}
-.g48 {
-  gap: 48px;
-}
-
 .w-max {
   width: stretch;
   width: -webkit-fill-available;
   width: -moz-available;
 }
 
-.uppercase {
-  text-transform: uppercase;
-}
-
 .pointer {
   cursor: pointer;
 }
@@ -131,6 +100,8 @@ a {
   align-items: center;
   justify-content: center;
   gap: 8px;
+  background: white;
+  color: black;
 }
 
 .btn-block {
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 8dc3cb9..11bc568 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -30,7 +30,7 @@ export function LayoutPage() {
       <Menu
         menuClassName="ctx-menu"
         menuButton={
-          <div className="flex f-center g12">
+          <div className="flex gap-2 items-center">
             <div className={`fi fi-${lang.split(/[-_]/i)[1]?.toLowerCase()}`}></div>
             <div className="uppercase pointer">
               <b>{lang.includes("-") ? lang.split("-")[0] : lang}</b>
@@ -129,8 +129,8 @@ export function LayoutPage() {
           <input className="search-input" type="text" placeholder="Search" />
           <Icon name="search" size={15} />
   </div>*/}
-        <div className="f-grow">{/* Future menu items go here */}</div>
-        <div className="header-right">
+        <div className="grow">{/* Future menu items go here */}</div>
+        <div className="flex items-center gap-3">
           {langSelector()}
           {loggedIn()}
           {loggedOut()}
diff --git a/src/pages/providers/nostr.tsx b/src/pages/providers/nostr.tsx
index 9b666ad..a18eafe 100644
--- a/src/pages/providers/nostr.tsx
+++ b/src/pages/providers/nostr.tsx
@@ -70,7 +70,7 @@ export function ConfigureNostrType() {
 
   return (
     <div className="owncast-config">
-      <div className="flex f-col g24">
+      <div className="flex flex-col gap-3">
         <div>
           <p>Nostr streaming provider URL</p>
           <div className="paper">
diff --git a/src/pages/providers/owncast.tsx b/src/pages/providers/owncast.tsx
index 960161c..cca1dff 100644
--- a/src/pages/providers/owncast.tsx
+++ b/src/pages/providers/owncast.tsx
@@ -70,7 +70,7 @@ export function ConfigureOwncast() {
 
   return (
     <div className="owncast-config">
-      <div className="flex f-col g24">
+      <div className="flex flex-col gap-3">
         <div>
           <p>Owncast instance url</p>
           <div className="paper">
diff --git a/src/pages/settings-page.tsx b/src/pages/settings-page.tsx
index 22aa10b..a5c492e 100644
--- a/src/pages/settings-page.tsx
+++ b/src/pages/settings-page.tsx
@@ -3,20 +3,25 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { Button as AlbyZapsButton } from "@getalby/bitcoin-connect-react";
-import { hexToBech32 } from "@snort/shared";
+import { hexToBech32, unwrap } from "@snort/shared";
 
 import { useLogin } from "@/hooks/login";
 import Copy from "@/element/copy";
+import { NostrProviderDialog } from "@/element/nostr-provider-dialog";
+import { useStreamProvider } from "@/hooks/stream-provider";
+import { StreamProviders } from "@/providers";
 
 const enum Tab {
   Account,
   Notifications,
+  Stream,
 }
 
 export function SettingsPage() {
   const navigate = useNavigate();
   const login = useLogin();
   const [tab, setTab] = useState(Tab.Account);
+  const providers = useStreamProvider();
 
   useEffect(() => {
     if (!login) {
@@ -55,19 +60,36 @@ export function SettingsPage() {
           </>
         );
       }
+      case Tab.Stream: {
+        return <>
+          <h1>
+            <FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
+          </h1>
+          <NostrProviderDialog provider={unwrap(providers.find(a => a.name === "zap.stream"))} showEndpoints={true} />
+        </>
+      }
     }
   }
+
+  function tabName(t: Tab) {
+    switch (t) {
+      case Tab.Account: return <FormattedMessage defaultMessage="Account" id="TwyMau" />;
+      case Tab.Stream: return <FormattedMessage defaultMessage="Stream" id="uYw2LD" />
+    }
+  }
+
   return (
     <div className="settings-page">
-      <div className="flex f-col g48">
+      <div className="flex flex-col gap-5">
         <h1>
           <FormattedMessage defaultMessage="Settings" id="D3idYv" />
         </h1>
-        <div className="flex g24 f-col-mobile">
-          <div className="flex f-col g24 tab-options">
-            <div onClick={() => setTab(Tab.Account)}>
-              <FormattedMessage defaultMessage="Account" id="TwyMau" />
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2 tab-options">
+            {[Tab.Account, Tab.Stream].map(t => <div onClick={() => setTab(t)}>
+              {tabName(t)}
             </div>
+            )}
           </div>
           <div className="tab-content">{tabContent()}</div>
         </div>
diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx
index 33fb5b1..bba28b8 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -52,8 +52,8 @@ function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedNostrEvent })
   const viewers = Number(findTag(ev, "current_participants") ?? "0");
   return (
     <>
-      <div className="flex f-center info">
-        <div className="f-grow stream-info">
+      <div className="flex items-center info">
+        <div className="grow stream-info">
           <h1>{findTag(ev, "title")}</h1>
           <p>{findTag(ev, "summary")}</p>
           <div className="tags">
@@ -81,7 +81,7 @@ function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedNostrEvent })
         </div>
         <div className="profile-info">
           <Profile pubkey={host ?? ""} />
-          <div className="flex g12">
+          <div className="flex gap-2">
             <div className="hide-on-mobile">
               <FollowButton pubkey={host} />
             </div>
diff --git a/src/pages/summary.tsx b/src/pages/summary.tsx
index 2bea146..ebe0275 100644
--- a/src/pages/summary.tsx
+++ b/src/pages/summary.tsx
@@ -131,7 +131,7 @@ export function StreamSummary({ link, preload }: { link: NostrLink; preload?: No
     <div className="stream-summary">
       <h1>{title}</h1>
       <p>{summary}</p>
-      <div className="flex g8">
+      <div className="flex gap-1">
         <StatePill state={status as StreamState} />
         {streamLength > 0 && (
           <FormattedMessage
@@ -158,23 +158,23 @@ export function StreamSummary({ link, preload }: { link: NostrLink; preload?: No
               if (active && payload && payload.length) {
                 const data = payload[0].payload as StatSlot;
                 return (
-                  <div className="plain-paper flex f-col g8">
+                  <div className="plain-paper flex flex-col gap-2">
                     <div>
                       <FormattedDate value={data.time * 1000} timeStyle="short" dateStyle="short" />
                     </div>
-                    <div className="flex f-space">
+                    <div className="flex justify-between">
                       <div>
                         <FormattedMessage defaultMessage="Messages" />
                       </div>
                       <div>{data.messages}</div>
                     </div>
-                    <div className="flex f-space">
+                    <div className="flex justify-between">
                       <div>
                         <FormattedMessage defaultMessage="Reactions" />
                       </div>
                       <div>{data.reactions}</div>
                     </div>
-                    <div className="flex f-space">
+                    <div className="flex justify-between">
                       <div>
                         <FormattedMessage defaultMessage="Zaps" />
                       </div>
@@ -189,14 +189,14 @@ export function StreamSummary({ link, preload }: { link: NostrLink; preload?: No
         </BarChart>
       </ResponsiveContainer>
 
-      <div className="flex g8">
-        <div className="plain-paper f-1">
+      <div className="flex gap-1">
+        <div className="plain-paper flex-1">
           <h3>
             <FormattedMessage defaultMessage="Top Chatters" />
           </h3>
-          <div className="flex f-col g8">
+          <div className="flex flex-col gap-2">
             {chatSummary.slice(0, 5).map(a => (
-              <div className="flex f-space f-center" key={a.pubkey}>
+              <div className="flex justify-between items-center" key={a.pubkey}>
                 <Profile pubkey={a.pubkey} />
                 <div>
                   <FormattedMessage
@@ -210,13 +210,13 @@ export function StreamSummary({ link, preload }: { link: NostrLink; preload?: No
             ))}
           </div>
         </div>
-        <div className="plain-paper f-1">
+        <div className="plain-paper flex-1">
           <h3>
             <FormattedMessage defaultMessage="Top Zappers" />
           </h3>
-          <div className="flex f-col g8">
+          <div className="flex flex-col gap-2">
             {zapsSummary.slice(0, 5).map(a => (
-              <div className="flex f-space f-center" key={a.pubkey}>
+              <div className="flex justify-between items-center" key={a.pubkey}>
                 <Profile pubkey={a.pubkey} />
                 <div>
                   <FormattedMessage
diff --git a/src/pages/widgets.tsx b/src/pages/widgets.tsx
index cb810e1..fc0a319 100644
--- a/src/pages/widgets.tsx
+++ b/src/pages/widgets.tsx
@@ -173,31 +173,31 @@ export function WidgetsPage() {
   const baseUrl = `${window.location.protocol}//${window.location.host}`;
 
   return (
-    <div className="widgets g8">
-      <div className="flex f-col g8">
+    <div className="widgets gap-2">
+      <div className="flex flex-col gap-2">
         <h3>
           <FormattedMessage defaultMessage="Chat Widget" id="hpl4BP" />
         </h3>
         <Copy text={`${baseUrl}/chat/${npub}`} />
       </div>
-      <div className="flex f-col g8">
+      <div className="flex flex-col gap-2">
         <ZapAlertConfiguration npub={npub} baseUrl={baseUrl} />
       </div>
-      <div className="flex f-col g8">
+      <div className="flex flex-col gap-2">
         <h3>
           <FormattedMessage defaultMessage="Top Zappers" id="dVD/AR" />
         </h3>
         <Copy text={`${baseUrl}/alert/${npub}/top-zappers`} />
         {currentLink && <TopZappersWidget link={currentLink} />}
       </div>
-      <div className="flex f-col g8">
+      <div className="flex flex-col gap-2">
         <h3>
           <FormattedMessage defaultMessage="Current Viewers" id="rgsbu9" />
         </h3>
         <Copy text={`${baseUrl}/alert/${npub}/views`} />
         {currentLink && <Views link={currentLink} />}
       </div>
-      <div className="flex f-col g8">
+      <div className="flex flex-col gap-2">
         <h3>
           <FormattedMessage defaultMessage="Music" id="79lLl+" />
         </h3>
diff --git a/src/pages/widgets/top-zappers.tsx b/src/pages/widgets/top-zappers.tsx
index 54b8d44..133d2d9 100644
--- a/src/pages/widgets/top-zappers.tsx
+++ b/src/pages/widgets/top-zappers.tsx
@@ -13,7 +13,7 @@ export function TopZappersWidget({ link }: { link: NostrLink }) {
       <div>
         <FormattedMessage defaultMessage="Top Zappers" id="dVD/AR" />
       </div>
-      <div className="flex g8">
+      <div className="flex gap-1">
         <TopZappers zaps={zaps} limit={3} />
       </div>
     </div>
diff --git a/src/pages/widgets/zaps.tsx b/src/pages/widgets/zaps.tsx
index 54f4814..b02a843 100644
--- a/src/pages/widgets/zaps.tsx
+++ b/src/pages/widgets/zaps.tsx
@@ -64,7 +64,7 @@ export function ZapAlerts({ link }: { link: NostrLink }) {
     }
   }, [zap?.id]);
 
-  return <div className="flex f-center f-col zap-alerts-widget">{zap && <ZapAlertItem key={zap.id} item={zap} />}</div>;
+  return <div className="flex items-center flex-col gap-2 zap-alerts-widget">{zap && <ZapAlertItem key={zap.id} item={zap} />}</div>;
 }
 
 export function ZapAlertItem({ item }: { item: ParsedZap }) {
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..ffb9a83
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/vite.config.ts b/vite.config.ts
index 4648d21..eb00c17 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
       srcDir: "src",
       filename: "service-worker.ts",
       devOptions: {
-        enabled: true,
+        enabled: false,
         type: "module",
       },
     }),
diff --git a/yarn.lock b/yarn.lock
index 761af1d..9e2c378 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@alloc/quick-lru@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@alloc/quick-lru@npm:5.2.0"
+  checksum: bdc35758b552bcf045733ac047fb7f9a07c4678b944c641adfbd41f798b4b91fffd0fdc0df2578d9b0afc7b4d636aa6e110ead5d6281a2adc1ab90efd7f057f8
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.2.1
   resolution: "@ampproject/remapping@npm:2.2.1"
@@ -3684,6 +3691,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"any-promise@npm:^1.0.0":
+  version: 1.3.0
+  resolution: "any-promise@npm:1.3.0"
+  checksum: 0ee8a9bdbe882c90464d75d1f55cf027f5458650c4bd1f0467e65aec38ccccda07ca5844969ee77ed46d04e7dded3eaceb027e8d32f385688523fe305fa7e1de
+  languageName: node
+  linkType: hard
+
+"anymatch@npm:~3.1.2":
+  version: 3.1.3
+  resolution: "anymatch@npm:3.1.3"
+  dependencies:
+    normalize-path: ^3.0.0
+    picomatch: ^2.0.4
+  checksum: 3e044fd6d1d26545f235a9fe4d7a534e2029d8e59fa7fd9f2a6eb21230f6b5380ea1eaf55136e60cbf8e613544b3b766e7a6fa2102e2a3a117505466e3025dc2
+  languageName: node
+  linkType: hard
+
 "aproba@npm:^1.0.3 || ^2.0.0":
   version: 2.0.0
   resolution: "aproba@npm:2.0.0"
@@ -3701,6 +3725,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"arg@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "arg@npm:5.0.2"
+  checksum: 6c69ada1a9943d332d9e5382393e897c500908d91d5cb735a01120d5f71daf1b339b7b8980cbeaba8fd1afc68e658a739746179e4315a26e8a28951ff9930078
+  languageName: node
+  linkType: hard
+
 "argparse@npm:^2.0.1":
   version: 2.0.1
   resolution: "argparse@npm:2.0.1"
@@ -3771,6 +3802,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:^10.4.16":
+  version: 10.4.16
+  resolution: "autoprefixer@npm:10.4.16"
+  dependencies:
+    browserslist: ^4.21.10
+    caniuse-lite: ^1.0.30001538
+    fraction.js: ^4.3.6
+    normalize-range: ^0.1.2
+    picocolors: ^1.0.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: 45fad7086495048dacb14bb7b00313e70e135b5d8e8751dcc60548889400763705ab16fc2d99ea628b44c3472698fb0e39598f595ba28409c965ab159035afde
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -3828,6 +3877,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"binary-extensions@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "binary-extensions@npm:2.2.0"
+  checksum: ccd267956c58d2315f5d3ea6757cf09863c5fc703e50fbeb13a7dc849b812ef76e3cf9ca8f35a0c48498776a7478d7b4a0418e1e2b8cb9cb9731f2922aaad7f8
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -3847,7 +3903,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.2":
+"braces@npm:^3.0.2, braces@npm:~3.0.2":
   version: 3.0.2
   resolution: "braces@npm:3.0.2"
   dependencies:
@@ -3931,6 +3987,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelcase-css@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "camelcase-css@npm:2.0.1"
+  checksum: 1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001517":
   version: 1.0.30001524
   resolution: "caniuse-lite@npm:1.0.30001524"
@@ -3938,6 +4001,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001538":
+  version: 1.0.30001566
+  resolution: "caniuse-lite@npm:1.0.30001566"
+  checksum: 0f9084bf9f7d5c0a9ddb200c2baddb25dd2ad5a2f205f01e7b971f3e98e9a7bb23c2d86bae48237e9bc9782b682cffaaf3406d936937ab9844987dbe2a6401f2
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -3959,6 +4029,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "chokidar@npm:3.5.3"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: b49fcde40176ba007ff361b198a2d35df60d9bb2a5aab228279eb810feae9294a6b4649ab15981304447afe1e6ffbf4788ad5db77235dc770ab777c6e771980c
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -4028,6 +4117,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "commander@npm:4.1.1"
+  checksum: d7b9913ff92cae20cb577a4ac6fcc121bd6223319e54a40f51a14740a681ad5c574fd29a57da478a5f234a6fa6c52cbf0b7c641353e03c648b1ae85ba670b977
+  languageName: node
+  linkType: hard
+
 "common-tags@npm:^1.8.0":
   version: 1.8.2
   resolution: "common-tags@npm:1.8.2"
@@ -4097,6 +4193,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssesc@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "cssesc@npm:3.0.0"
+  bin:
+    cssesc: bin/cssesc
+  checksum: f8c4ababffbc5e2ddf2fa9957dda1ee4af6048e22aeda1869d0d00843223c1b13ad3f5d88b51caa46c994225eacb636b764eb807a8883e2fb6f99b4f4e8c48b2
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2":
   version: 3.1.2
   resolution: "csstype@npm:3.1.2"
@@ -4294,6 +4399,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"didyoumean@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "didyoumean@npm:1.2.2"
+  checksum: d5d98719d58b3c2fa59663c4c42ba9716f1fd01245c31d5fce31915bd3aa26e6aac149788e007358f778ebbd68a2256eb5973e8ca6f221df221ba060115acf2e
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -4303,6 +4415,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dlv@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "dlv@npm:1.1.3"
+  checksum: d7381bca22ed11933a1ccf376db7a94bee2c57aa61e490f680124fa2d1cd27e94eba641d9f45be57caab4f9a6579de0983466f620a2cd6230d7ec93312105ae7
+  languageName: node
+  linkType: hard
+
 "dnd-core@npm:^16.0.1":
   version: 16.0.1
   resolution: "dnd-core@npm:16.0.1"
@@ -4796,7 +4915,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -4913,6 +5032,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fraction.js@npm:^4.3.6":
+  version: 4.3.7
+  resolution: "fraction.js@npm:4.3.7"
+  checksum: e1553ae3f08e3ba0e8c06e43a3ab20b319966dfb7ddb96fd9b5d0ee11a66571af7f993229c88ebbb0d4a816eb813a24ed48207b140d442a8f76f33763b8d1f3f
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^9.0.1":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
@@ -5054,7 +5180,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.1.2":
+"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -5072,6 +5198,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:7.1.6":
+  version: 7.1.6
+  resolution: "glob@npm:7.1.6"
+  dependencies:
+    fs.realpath: ^1.0.0
+    inflight: ^1.0.4
+    inherits: 2
+    minimatch: ^3.0.4
+    once: ^1.3.0
+    path-is-absolute: ^1.0.0
+  checksum: 351d549dd90553b87c2d3f90ce11aed9e1093c74130440e7ae0592e11bbcd2ce7f0ebb8ba6bfe63aaf9b62166a7f4c80cb84490ae5d78408bb2572bf7d4ee0a6
+  languageName: node
+  linkType: hard
+
 "glob@npm:^10.2.2":
   version: 10.3.3
   resolution: "glob@npm:10.3.3"
@@ -5432,6 +5572,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-binary-path@npm:~2.1.0":
+  version: 2.1.0
+  resolution: "is-binary-path@npm:2.1.0"
+  dependencies:
+    binary-extensions: ^2.0.0
+  checksum: 84192eb88cff70d320426f35ecd63c3d6d495da9d805b19bc65b518984b7c0760280e57dbf119b7e9be6b161784a5a673ab2c6abe83abb5198a432232ad5b35c
+  languageName: node
+  linkType: hard
+
 "is-boolean-object@npm:^1.1.0":
   version: 1.1.2
   resolution: "is-boolean-object@npm:1.1.2"
@@ -5481,7 +5630,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -5702,6 +5851,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^1.19.1":
+  version: 1.21.0
+  resolution: "jiti@npm:1.21.0"
+  bin:
+    jiti: bin/jiti.js
+  checksum: a7bd5d63921c170eaec91eecd686388181c7828e1fa0657ab374b9372bfc1f383cf4b039e6b272383d5cb25607509880af814a39abdff967322459cca41f2961
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -5853,6 +6011,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lilconfig@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "lilconfig@npm:2.1.0"
+  checksum: 8549bb352b8192375fed4a74694cd61ad293904eee33f9d4866c2192865c44c4eb35d10782966242634e0cbc1e91fe62b1247f148dc5514918e3a966da7ea117
+  languageName: node
+  linkType: hard
+
+"lilconfig@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "lilconfig@npm:3.0.0"
+  checksum: a155f1cd24d324ab20dd6974db9ebcf3fb6f2b60175f7c052d917ff8a746b590bc1ee550f6fc3cb1e8716c8b58304e22fe2193febebc0cf16fa86d85e6f896c5
+  languageName: node
+  linkType: hard
+
+"lines-and-columns@npm:^1.1.6":
+  version: 1.2.4
+  resolution: "lines-and-columns@npm:1.2.4"
+  checksum: 0c37f9f7fa212b38912b7145e1cd16a5f3cd34d782441c3e6ca653485d326f58b3caccda66efce1c5812bde4961bbde3374fae4b0d11bf1226152337f3894aa5
+  languageName: node
+  linkType: hard
+
 "lit-element@npm:^3.3.0":
   version: 3.3.3
   resolution: "lit-element@npm:3.3.3"
@@ -6044,7 +6223,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.4":
+"micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
   dependencies:
@@ -6054,7 +6233,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+"minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -6188,6 +6367,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mz@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "mz@npm:2.7.0"
+  dependencies:
+    any-promise: ^1.0.0
+    object-assign: ^4.0.1
+    thenify-all: ^1.0.0
+  checksum: 8427de0ece99a07e9faed3c0c6778820d7543e3776f9a84d22cf0ec0a8eb65f6e9aee9c9d353ff9a105ff62d33a9463c6ca638974cc652ee8140cd1e35951c87
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -6250,6 +6440,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
+  version: 3.0.0
+  resolution: "normalize-path@npm:3.0.0"
+  checksum: 88eeb4da891e10b1318c4b2476b6e2ecbeb5ff97d946815ffea7794c31a89017c70d7f34b3c2ebf23ef4e9fc9fb99f7dffe36da22011b5b5c6ffa34f4873ec20
+  languageName: node
+  linkType: hard
+
+"normalize-range@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "normalize-range@npm:0.1.2"
+  checksum: 9b2f14f093593f367a7a0834267c24f3cb3e887a2d9809c77d8a7e5fd08738bcd15af46f0ab01cc3a3d660386f015816b5c922cea8bf2ee79777f40874063184
+  languageName: node
+  linkType: hard
+
 "nostr-tools@npm:1.13.1":
   version: 1.13.1
   resolution: "nostr-tools@npm:1.13.1"
@@ -6275,13 +6479,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.1.1":
+"object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
   languageName: node
   linkType: hard
 
+"object-hash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "object-hash@npm:3.0.0"
+  checksum: 80b4904bb3857c52cc1bfd0b52c0352532ca12ed3b8a6ff06a90cd209dfda1b95cee059a7625eb9da29537027f68ac4619363491eedb2f5d3dddbba97494fd6c
+  languageName: node
+  linkType: hard
+
 "object-inspect@npm:^1.12.3, object-inspect@npm:^1.9.0":
   version: 1.12.3
   resolution: "object-inspect@npm:1.12.3"
@@ -6429,14 +6640,98 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.2.2, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.32":
+"pify@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "pify@npm:2.3.0"
+  checksum: 9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba
+  languageName: node
+  linkType: hard
+
+"pirates@npm:^4.0.1":
+  version: 4.0.6
+  resolution: "pirates@npm:4.0.6"
+  checksum: 46a65fefaf19c6f57460388a5af9ab81e3d7fd0e7bc44ca59d753cb5c4d0df97c6c6e583674869762101836d68675f027d60f841c105d72734df9dfca97cbcc6
+  languageName: node
+  linkType: hard
+
+"postcss-import@npm:^15.1.0":
+  version: 15.1.0
+  resolution: "postcss-import@npm:15.1.0"
+  dependencies:
+    postcss-value-parser: ^4.0.0
+    read-cache: ^1.0.0
+    resolve: ^1.1.7
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 7bd04bd8f0235429009d0022cbf00faebc885de1d017f6d12ccb1b021265882efc9302006ba700af6cab24c46bfa2f3bc590be3f9aee89d064944f171b04e2a3
+  languageName: node
+  linkType: hard
+
+"postcss-js@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "postcss-js@npm:4.0.1"
+  dependencies:
+    camelcase-css: ^2.0.1
+  peerDependencies:
+    postcss: ^8.4.21
+  checksum: 5c1e83efeabeb5a42676193f4357aa9c88f4dc1b3c4a0332c132fe88932b33ea58848186db117cf473049fc233a980356f67db490bd0a7832ccba9d0b3fd3491
+  languageName: node
+  linkType: hard
+
+"postcss-load-config@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "postcss-load-config@npm:4.0.2"
+  dependencies:
+    lilconfig: ^3.0.0
+    yaml: ^2.3.4
+  peerDependencies:
+    postcss: ">=8.0.9"
+    ts-node: ">=9.0.0"
+  peerDependenciesMeta:
+    postcss:
+      optional: true
+    ts-node:
+      optional: true
+  checksum: 7c27dd3801db4eae207a5116fed2db6b1ebb780b40c3dd62a3e57e087093a8e6a14ee17ada729fee903152d6ef4826c6339eb135bee6208e0f3140d7e8090185
+  languageName: node
+  linkType: hard
+
+"postcss-nested@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "postcss-nested@npm:6.0.1"
+  dependencies:
+    postcss-selector-parser: ^6.0.11
+  peerDependencies:
+    postcss: ^8.2.14
+  checksum: 7ddb0364cd797de01e38f644879189e0caeb7ea3f78628c933d91cc24f327c56d31269384454fc02ecaf503b44bfa8e08870a7c4cc56b23bc15640e1894523fa
+  languageName: node
+  linkType: hard
+
+"postcss-selector-parser@npm:^6.0.11":
+  version: 6.0.13
+  resolution: "postcss-selector-parser@npm:6.0.13"
+  dependencies:
+    cssesc: ^3.0.0
+    util-deprecate: ^1.0.2
+  checksum: f89163338a1ce3b8ece8e9055cd5a3165e79a15e1c408e18de5ad8f87796b61ec2d48a2902d179ae0c4b5de10fccd3a325a4e660596549b040bc5ad1b465f096
+  languageName: node
+  linkType: hard
+
+"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "postcss-value-parser@npm:4.2.0"
+  checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.4.23, postcss@npm:^8.4.32":
   version: 8.4.32
   resolution: "postcss@npm:8.4.32"
   dependencies:
@@ -6842,6 +7137,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"read-cache@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "read-cache@npm:1.0.0"
+  dependencies:
+    pify: ^2.3.0
+  checksum: cffc728b9ede1e0667399903f9ecaf3789888b041c46ca53382fa3a06303e5132774dc0a96d0c16aa702dbac1ea0833d5a868d414f5ab2af1e1438e19e6657c6
+  languageName: node
+  linkType: hard
+
 "readable-stream@npm:^3.6.0":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
@@ -6853,6 +7157,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:~3.6.0":
+  version: 3.6.0
+  resolution: "readdirp@npm:3.6.0"
+  dependencies:
+    picomatch: ^2.2.1
+  checksum: 1ced032e6e45670b6d7352d71d21ce7edf7b9b928494dcaba6f11fba63180d9da6cd7061ebc34175ffda6ff529f481818c962952004d273178acd70f7059b320
+  languageName: node
+  linkType: hard
+
 "recharts-scale@npm:^0.4.4":
   version: 0.4.5
   resolution: "recharts-scale@npm:0.4.5"
@@ -6974,6 +7287,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@npm:^1.1.7, resolve@npm:^1.22.2":
+  version: 1.22.8
+  resolution: "resolve@npm:1.22.8"
+  dependencies:
+    is-core-module: ^2.13.0
+    path-parse: ^1.0.7
+    supports-preserve-symlinks-flag: ^1.0.0
+  bin:
+    resolve: bin/resolve
+  checksum: f8a26958aa572c9b064562750b52131a37c29d072478ea32e129063e2da7f83e31f7f11e7087a18225a8561cfe8d2f0df9dbea7c9d331a897571c0a2527dbb4c
+  languageName: node
+  linkType: hard
+
 "resolve@npm:^1.14.2, resolve@npm:^1.19.0":
   version: 1.22.4
   resolution: "resolve@npm:1.22.4"
@@ -6987,6 +7313,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.2#~builtin<compat/resolve>":
+  version: 1.22.8
+  resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
+  dependencies:
+    is-core-module: ^2.13.0
+    path-parse: ^1.0.7
+    supports-preserve-symlinks-flag: ^1.0.0
+  bin:
+    resolve: bin/resolve
+  checksum: 5479b7d431cacd5185f8db64bfcb7286ae5e31eb299f4c4f404ad8aa6098b77599563ac4257cb2c37a42f59dfc06a1bec2bcf283bb448f319e37f0feb9a09847
+  languageName: node
+  linkType: hard
+
 "resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>":
   version: 1.22.4
   resolution: "resolve@patch:resolve@npm%3A1.22.4#~builtin<compat/resolve>::version=1.22.4&hash=c3c19d"
@@ -7400,6 +7739,7 @@ __metadata:
     "@void-cat/api": ^1.0.7
     "@webbtc/webln-types": ^1.0.12
     "@webscopeio/react-textarea-autocomplete": ^4.9.2
+    autoprefixer: ^10.4.16
     buffer: ^6.0.3
     emoji-mart: ^5.5.2
     eslint: ^8.48.0
@@ -7409,6 +7749,7 @@ __metadata:
     lodash: ^4.17.21
     lodash.uniqby: ^4.7.0
     marked: ^9.1.2
+    postcss: ^8.4.32
     prettier: ^2.8.8
     prop-types: ^15.8.1
     qr-code-styling: ^1.6.0-rc.1
@@ -7424,6 +7765,7 @@ __metadata:
     react-tag-input-component: ^2.0.2
     recharts: ^2.9.3
     semantic-sdp: ^3.26.3
+    tailwindcss: ^3.3.5
     typescript: ^5.2.2
     usehooks-ts: ^2.9.1
     vite: ^5.0.5
@@ -7561,6 +7903,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sucrase@npm:^3.32.0":
+  version: 3.34.0
+  resolution: "sucrase@npm:3.34.0"
+  dependencies:
+    "@jridgewell/gen-mapping": ^0.3.2
+    commander: ^4.0.0
+    glob: 7.1.6
+    lines-and-columns: ^1.1.6
+    mz: ^2.7.0
+    pirates: ^4.0.1
+    ts-interface-checker: ^0.1.9
+  bin:
+    sucrase: bin/sucrase
+    sucrase-node: bin/sucrase-node
+  checksum: 61860063bdf6103413698e13247a3074d25843e91170825a9752e4af7668ffadd331b6e99e92fc32ee5b3c484ee134936f926fa9039d5711fafff29d017a2110
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -7586,6 +7946,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:^3.3.5":
+  version: 3.3.5
+  resolution: "tailwindcss@npm:3.3.5"
+  dependencies:
+    "@alloc/quick-lru": ^5.2.0
+    arg: ^5.0.2
+    chokidar: ^3.5.3
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.3.0
+    glob-parent: ^6.0.2
+    is-glob: ^4.0.3
+    jiti: ^1.19.1
+    lilconfig: ^2.1.0
+    micromatch: ^4.0.5
+    normalize-path: ^3.0.0
+    object-hash: ^3.0.0
+    picocolors: ^1.0.0
+    postcss: ^8.4.23
+    postcss-import: ^15.1.0
+    postcss-js: ^4.0.1
+    postcss-load-config: ^4.0.1
+    postcss-nested: ^6.0.1
+    postcss-selector-parser: ^6.0.11
+    resolve: ^1.22.2
+    sucrase: ^3.32.0
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: e04bb3bb7f9f17e9b6db0c7ace755ef0d6d05bff36ebeb9e5006e13c018ed5566f09db30a1a34380e38fa93ebbb4ae0e28fe726879d5e9ddd8c5b52bffd26f14
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.1.15
   resolution: "tar@npm:6.1.15"
@@ -7647,6 +8040,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thenify-all@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "thenify-all@npm:1.6.0"
+  dependencies:
+    thenify: ">= 3.1.0 < 4"
+  checksum: dba7cc8a23a154cdcb6acb7f51d61511c37a6b077ec5ab5da6e8b874272015937788402fd271fdfc5f187f8cb0948e38d0a42dcc89d554d731652ab458f5343e
+  languageName: node
+  linkType: hard
+
+"thenify@npm:>= 3.1.0 < 4":
+  version: 3.3.1
+  resolution: "thenify@npm:3.3.1"
+  dependencies:
+    any-promise: ^1.0.0
+  checksum: 84e1b804bfec49f3531215f17b4a6e50fd4397b5f7c1bccc427b9c656e1ecfb13ea79d899930184f78bc2f57285c54d9a50a590c8868f4f0cef5c1d9f898b05e
+  languageName: node
+  linkType: hard
+
 "tiny-invariant@npm:^1.3.1":
   version: 1.3.1
   resolution: "tiny-invariant@npm:1.3.1"
@@ -7688,6 +8099,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-interface-checker@npm:^0.1.9":
+  version: 0.1.13
+  resolution: "ts-interface-checker@npm:0.1.13"
+  checksum: 20c29189c2dd6067a8775e07823ddf8d59a33e2ffc47a1bd59a5cb28bb0121a2969a816d5e77eda2ed85b18171aa5d1c4005a6b88ae8499ec7cc49f78571cb5e
+  languageName: node
+  linkType: hard
+
 "tslib@npm:2.6.2, tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
@@ -7985,7 +8403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util-deprecate@npm:^1.0.1":
+"util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
   checksum: 474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2
@@ -8427,6 +8845,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.3.4":
+  version: 2.3.4
+  resolution: "yaml@npm:2.3.4"
+  checksum: e6d1dae1c6383bcc8ba11796eef3b8c02d5082911c6723efeeb5ba50fc8e881df18d645e64de68e421b577296000bea9c75d6d9097c2f6699da3ae0406c030d8
+  languageName: node
+  linkType: hard
+
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"