From d82d424985332ad1a02d284ee6bd7aaa4a433df4 Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Thu, 15 May 2025 13:16:11 -0500
Subject: [PATCH] chore(ui): Run tailwind upgrade and review changes

Ran the `npx @tailwindcss/upgrade` and accepted the changes that seemed safe.

They're things like:
- `data-[closed]:translate-y-9` -> `data-closed:translate-y-8` ()swaps the square bracket syntax to a `-` modifier)
- `bg-gradient-to-*` -> `bg-linear-to-*`
- `/[*%]` -> `/*` (swap square bracket syntax for inline)
- `theme(*.*)` -> `var(--*-*)` (theme styles are exposed as variables with hyphens for dots now)
- `[background-size:*]` -> `bg-size[*]` (move the square brackets inside tag)
- `[.active_&]:` -> `in[.active]:` (new syntax for parent query)
- `!class` -> `class!` (e.g. _!overflow-visible_ to _overflow-visible!_, for [important flag](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag style)
- `w-[1px]` -> `w-px` (that's a new syntax for a 1px width)
- `h-[1px]` -> `h-px` (that's a new syntax for a 1px height)
- moved `html` and `html, body` global settings in the _index.css_

Also killed off an unused `import` and blank css class.
Also picked up the two `flex-grow` -> `grow` that I missed last pass, oops.
---
 ui/package-lock.json                          |  6 +-
 ui/src/components/ActionBar.tsx               | 18 +++---
 ui/src/components/Button.tsx                  | 10 ++--
 ui/src/components/Card.tsx                    |  4 +-
 ui/src/components/Combobox.tsx                |  6 +-
 ui/src/components/Header.tsx                  |  2 +-
 ui/src/components/KvmCard.tsx                 |  4 +-
 ui/src/components/Modal.tsx                   |  6 +-
 ui/src/components/SelectMenuBasic.tsx         |  2 +-
 ui/src/components/StepCounter.tsx             |  4 +-
 ui/src/components/Terminal.tsx                |  4 +-
 .../components/UpdateInProgressStatusCard.tsx |  2 +-
 ui/src/components/UsbDeviceSetting.tsx        |  2 +-
 ui/src/components/VideoOverlay.tsx            |  4 +-
 ui/src/components/WebRTCVideo.tsx             | 12 ++--
 ui/src/index.css                              | 60 +++++++++----------
 ui/src/notifications.tsx                      |  2 +-
 ui/src/routes/devices.$id.mount.tsx           |  6 +-
 .../routes/devices.$id.settings.network.tsx   |  2 +-
 ui/src/routes/devices.$id.settings.tsx        | 22 +++----
 ui/src/routes/welcome-local.mode.tsx          |  4 +-
 ui/src/routes/welcome-local.tsx               |  4 +-
 ui/tailwind.config.js                         |  1 -
 23 files changed, 92 insertions(+), 95 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 5ac569b..dbdf5c3 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -3232,9 +3232,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.154",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.154.tgz",
-      "integrity": "sha512-G4VCFAyKbp1QJ+sWdXYIRYsPGvlV5sDACfCmoMFog3rjm1syLhI41WXm/swZypwCIWIm4IFLWzHY14joWMQ5Fw==",
+      "version": "1.5.155",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.155.tgz",
+      "integrity": "sha512-ps5KcGGmwL8VaeJlvlDlu4fORQpv3+GIcF5I3f9tUKUlJ/wsysh6HU8P5L1XWRYeXfA0oJd4PyM8ds8zTFf6Ng==",
       "dev": true,
       "license": "ISC"
     },
diff --git a/ui/src/components/ActionBar.tsx b/ui/src/components/ActionBar.tsx
index 1afef63..83ae509 100644
--- a/ui/src/components/ActionBar.tsx
+++ b/ui/src/components/ActionBar.tsx
@@ -89,8 +89,8 @@ export default function Actionbar({
               anchor="bottom start"
               transition
               className={cx(
-                "z-10 flex w-[420px] origin-top flex-col !overflow-visible",
-                "flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
+                "z-10 flex w-[420px] origin-top flex-col overflow-visible!",
+                "flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
               )}
             >
               {({ open }) => {
@@ -131,8 +131,8 @@ export default function Actionbar({
                 anchor="bottom start"
                 transition
                 className={cx(
-                  "z-10 flex w-[420px] origin-top flex-col !overflow-visible",
-                  "flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
+                  "z-10 flex w-[420px] origin-top flex-col overflow-visible!",
+                  "flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
                 )}
               >
                 {({ open }) => {
@@ -183,8 +183,8 @@ export default function Actionbar({
                   transitionProperty: "opacity",
                 }}
                 className={cx(
-                  "z-10 flex w-[420px] origin-top flex-col !overflow-visible",
-                  "flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
+                  "z-10 flex w-[420px] origin-top flex-col overflow-visible!",
+                  "flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
                 )}
               >
                 {({ open }) => {
@@ -226,8 +226,8 @@ export default function Actionbar({
               anchor="bottom start"
               transition
               className={cx(
-                "z-10 flex w-[420px] flex-col !overflow-visible",
-                "flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
+                "z-10 flex w-[420px] flex-col overflow-visible!",
+                "flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
               )}
             >
               {({ open }) => {
@@ -274,7 +274,7 @@ export default function Actionbar({
           </div>
 
           <div className="hidden items-center gap-x-2 lg:flex">
-            <div className="h-4 w-[1px] bg-slate-300 dark:bg-slate-600" />
+            <div className="h-4 w-px bg-slate-300 dark:bg-slate-600" />
             <Button
               size="XS"
               theme="light"
diff --git a/ui/src/components/Button.tsx b/ui/src/components/Button.tsx
index 26470f7..97fcc5f 100644
--- a/ui/src/components/Button.tsx
+++ b/ui/src/components/Button.tsx
@@ -126,9 +126,9 @@ function ButtonContent(props: ButtonContentPropsType) {
       <div
         className={cx(
           "flex w-full min-w-0 items-center gap-x-1.5 text-center",
-          textAlign === "left" ? "!text-left" : "",
-          textAlign === "center" ? "!text-center" : "",
-          textAlign === "right" ? "!text-right" : "",
+          textAlign === "left" ? "text-left!" : "",
+          textAlign === "center" ? "text-center!" : "",
+          textAlign === "right" ? "text-right!" : "",
         )}
       >
         {loading ? (
@@ -216,7 +216,7 @@ type LinkPropsType = Pick<LinkProps, "to"> &
 export const LinkButton = ({ to, ...props }: LinkPropsType) => {
   const classes = cx(
     "group outline-hidden",
-    props.disabled ? "pointer-events-none !opacity-70" : "",
+    props.disabled ? "pointer-events-none opacity-70!" : "",
     props.fullWidth ? "w-full" : "",
     props.loading ? "pointer-events-none" : "",
     props.className,
@@ -242,7 +242,7 @@ type LabelPropsType = Pick<HTMLLabelElement, "htmlFor"> &
 export const LabelButton = ({ htmlFor, ...props }: LabelPropsType) => {
   const classes = cx(
     "group outline-hidden block cursor-pointer",
-    props.disabled ? "pointer-events-none !opacity-70" : "",
+    props.disabled ? "pointer-events-none opacity-70!" : "",
     props.fullWidth ? "w-full" : "",
     props.loading ? "pointer-events-none" : "",
     props.className,
diff --git a/ui/src/components/Card.tsx b/ui/src/components/Card.tsx
index bf28e96..9c27c00 100644
--- a/ui/src/components/Card.tsx
+++ b/ui/src/components/Card.tsx
@@ -17,8 +17,8 @@ export const GridCard = ({
   return (
     <Card className={cx("overflow-hidden", cardClassName)}>
       <div className="relative h-full">
-        <div className="absolute inset-0 z-0 h-full w-full bg-gradient-to-tr from-blue-50/30 to-blue-50/20 transition-colors duration-300 ease-in-out dark:from-slate-800/30 dark:to-slate-800/20" />
-        <div className="absolute inset-0 z-0 h-full w-full rotate-0 bg-grid-blue-100/[25%] dark:bg-grid-slate-700/[7%]" />
+        <div className="absolute inset-0 z-0 h-full w-full bg-linear-to-tr from-blue-50/30 to-blue-50/20 transition-colors duration-300 ease-in-out dark:from-slate-800/30 dark:to-slate-800/20" />
+        <div className="absolute inset-0 z-0 h-full w-full rotate-0 bg-grid-blue-100/25 dark:bg-grid-slate-700/7" />
         <div className="isolate h-full">{children}</div>
       </div>
     </Card>
diff --git a/ui/src/components/Combobox.tsx b/ui/src/components/Combobox.tsx
index 03b8f0b..3fce228 100644
--- a/ui/src/components/Combobox.tsx
+++ b/ui/src/components/Combobox.tsx
@@ -58,7 +58,7 @@ export function Combobox({
     <HeadlessCombobox onChange={onChange} {...otherProps}>
       {() => (
         <>
-          <Card className="w-auto !border border-solid !border-slate-800/30 shadow-xs outline-0 dark:!border-slate-300/30">
+          <Card className="w-auto border! border-solid border-slate-800/30! shadow-xs outline-0 dark:border-slate-300/30!">
             <ComboboxInput
               ref={inputRef}
               className={clsx(
@@ -88,7 +88,7 @@ export function Combobox({
           </Card>
 
           {options().length > 0 && (
-            <ComboboxOptions className="hide-scrollbar absolute left-0 z-[100] mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
+            <ComboboxOptions className="hide-scrollbar absolute left-0 z-100 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
               {options().map(option => (
                 <ComboboxOption
                   key={option.value}
@@ -111,7 +111,7 @@ export function Combobox({
           )}
 
           {options().length === 0 && inputRef.current?.value && (
-            <div className="absolute left-0 z-[100] mt-1 w-full rounded-md bg-white px-4 py-2 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
+            <div className="absolute left-0 z-100 mt-1 w-full rounded-md bg-white px-4 py-2 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
               <div className="text-slate-500 dark:text-slate-400">{emptyMessage}</div>
             </div>
           )}
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 063c08a..543634a 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -100,7 +100,7 @@ export default function DashboardNavbar({
                 )}
                 {isLoggedIn ? (
                   <>
-                    <hr className="h-[20px] w-[1px] self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
+                    <hr className="h-[20px] w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
                     <div className="relative inline-block text-left">
                       <Menu>
                         <MenuButton className="h-full">
diff --git a/ui/src/components/KvmCard.tsx b/ui/src/components/KvmCard.tsx
index 4602b35..91296c5 100644
--- a/ui/src/components/KvmCard.tsx
+++ b/ui/src/components/KvmCard.tsx
@@ -78,7 +78,7 @@ export default function KvmCard({
             )}
           </div>
         </div>
-        <div className="h-[1px] bg-slate-800/20 dark:bg-slate-300/20" />
+        <div className="h-px bg-slate-800/20 dark:bg-slate-300/20" />
         <div className="flex justify-between">
           <div>
             {online ? (
@@ -111,7 +111,7 @@ export default function KvmCard({
 
             <MenuItems
               transition
-              className="data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
+              className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-leave:duration-75 data-enter:ease-out data-leave:ease-in"
             >
               <Card className="absolute right-0 z-10 w-56 px-1 mt-2 transition origin-top-right ring-1 ring-black/50 focus:outline-hidden">
                 <div className="divide-y divide-slate-800/20 dark:divide-slate-300/20">
diff --git a/ui/src/components/Modal.tsx b/ui/src/components/Modal.tsx
index e395445..1772011 100644
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -18,7 +18,7 @@ const Modal = React.memo(function Modal({
     <Dialog open={open} onClose={onClose} className="relative z-20">
       <DialogBackdrop
         transition
-        className="fixed inset-0 bg-gray-500/75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-500 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in dark:bg-slate-900/90"
+        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in dark:bg-slate-900/90"
       />
       <div className="fixed inset-0 z-20 w-screen overflow-y-auto">
         {/* TODO: This doesn't work well with other-sessions */}
@@ -26,8 +26,8 @@ const Modal = React.memo(function Modal({
           <DialogPanel
             transition
             className={cx(
-              "pointer-events-none relative w-full md:my-8 md:!mt-[10vh]",
-              "transform transition-all data-[closed]:translate-y-8 data-[closed]:opacity-0 data-[enter]:duration-500 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in",
+              "pointer-events-none relative w-full md:my-8 md:mt-[10vh]!",
+              "transform transition-all data-closed:translate-y-8 data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in",
               className,
             )}
           >
diff --git a/ui/src/components/SelectMenuBasic.tsx b/ui/src/components/SelectMenuBasic.tsx
index 68a0f3d..d5e9597 100644
--- a/ui/src/components/SelectMenuBasic.tsx
+++ b/ui/src/components/SelectMenuBasic.tsx
@@ -63,7 +63,7 @@ export const SelectMenuBasic = React.forwardRef<HTMLSelectElement, SelectMenuPro
         )}
       >
         {label && <FieldLabel label={label} id={id} as="span" />}
-        <Card className="w-auto !border border-solid !border-slate-800/30 shadow-xs outline-0 dark:!border-slate-300/30">
+        <Card className="w-auto border! border-solid border-slate-800/30! shadow-xs outline-0 dark:border-slate-300/30!">
           <select
             ref={ref}
             name={name}
diff --git a/ui/src/components/StepCounter.tsx b/ui/src/components/StepCounter.tsx
index 97cbc53..9033c56 100644
--- a/ui/src/components/StepCounter.tsx
+++ b/ui/src/components/StepCounter.tsx
@@ -23,7 +23,7 @@ const variants = cva({
 export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props) {
   const textStyle = variants({ size });
   return (
-    <Card className="!inline-flex w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
+    <Card className="inline-flex! w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
       {[...Array(nSteps).keys()].map(i => {
         if (i < currStepIdx) {
           return (
@@ -57,7 +57,7 @@ export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props)
           return (
             <Card
               className={cx(
-                "flex items-center justify-center !rounded-full text-slate-600 dark:text-slate-400",
+                "flex items-center justify-center rounded-full! text-slate-600 dark:text-slate-400",
                 textStyle,
                 size === "SM" ? "h-5 w-5" : "h-6 w-6",
               )}
diff --git a/ui/src/components/Terminal.tsx b/ui/src/components/Terminal.tsx
index 6a2c253..38927ea 100644
--- a/ui/src/components/Terminal.tsx
+++ b/ui/src/components/Terminal.tsx
@@ -171,12 +171,12 @@ function Terminal({
             [
               // Base styles
               "fixed bottom-0 w-full transform transition duration-500 ease-in-out",
-              "translate-y-[0px]",
+              "-translate-y-[0px]",
             ],
             {
               "pointer-events-none translate-y-[500px] opacity-100 transition duration-300":
                 !enableTerminal,
-              "pointer-events-auto translate-y-[0px] opacity-100 transition duration-300":
+              "pointer-events-auto -translate-y-[0px] opacity-100 transition duration-300":
                 enableTerminal,
             },
           )}
diff --git a/ui/src/components/UpdateInProgressStatusCard.tsx b/ui/src/components/UpdateInProgressStatusCard.tsx
index 764bcdb..b61752f 100644
--- a/ui/src/components/UpdateInProgressStatusCard.tsx
+++ b/ui/src/components/UpdateInProgressStatusCard.tsx
@@ -11,7 +11,7 @@ export default function UpdateInProgressStatusCard() {
 
   return (
     <div className="w-full select-none opacity-100 transition-all duration-300 ease-in-out">
-      <GridCard cardClassName="!shadow-xl">
+      <GridCard cardClassName="shadow-xl!">
         <div className="flex items-center justify-between gap-x-3 px-2.5 py-2.5 text-black dark:text-white">
           <div className="flex items-center gap-x-3">
             <LoadingSpinner className={cx("h-5 w-5", "shrink-0 text-blue-700")} />
diff --git a/ui/src/components/UsbDeviceSetting.tsx b/ui/src/components/UsbDeviceSetting.tsx
index 9ec7d39..432ec3d 100644
--- a/ui/src/components/UsbDeviceSetting.tsx
+++ b/ui/src/components/UsbDeviceSetting.tsx
@@ -150,7 +150,7 @@ export function UsbDeviceSetting() {
 
   return (
     <Fieldset disabled={loading} className="space-y-4">
-      <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
+      <div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
 
       <SettingsSectionHeader
         title="USB Device"
diff --git a/ui/src/components/VideoOverlay.tsx b/ui/src/components/VideoOverlay.tsx
index 23127f6..49ebd53 100644
--- a/ui/src/components/VideoOverlay.tsx
+++ b/ui/src/components/VideoOverlay.tsx
@@ -14,7 +14,7 @@ interface OverlayContentProps {
 }
 function OverlayContent({ children }: OverlayContentProps) {
   return (
-    <GridCard cardClassName="h-full pointer-events-auto !outline-hidden">
+    <GridCard cardClassName="h-full pointer-events-auto outline-hidden!">
       <div className="flex h-full w-full flex-col items-center justify-center rounded-md border border-slate-800/30 dark:border-slate-300/20">
         {children}
       </div>
@@ -376,7 +376,7 @@ export function PointerLockBar({ show }: PointerLockBarProps) {
           transition={{ duration: 0.5, ease: "easeInOut", delay: 0.5 }}
         >
           <div>
-            <Card className="rounded-b-none shadow-none !outline-0">
+            <Card className="rounded-b-none shadow-none outline-0!">
               <div className="flex items-center justify-between border border-slate-800/50 px-4 py-2 outline-0 backdrop-blur-xs dark:border-slate-300/20 dark:bg-slate-800">
                 <div className="flex items-center space-x-2">
                   <BsMouseFill className="h-4 w-4 text-blue-700 dark:text-blue-500" />
diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index c6d0c86..891555e 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -691,15 +691,15 @@ export default function WebRTCVideo() {
           <div
             className={cx(
               "absolute inset-0 -z-0 bg-blue-50/40 opacity-80 dark:bg-slate-800/40",
-              "[background-image:radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px),radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px)] dark:[background-image:radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px),radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px)]",
-              "[background-position:0_0,10px_10px]",
-              "[background-size:20px_20px]",
+              "bg-[radial-gradient(var(--color-blue-300)_0.5px,transparent_0.5px),radial-gradient(var(--color-blue-300)_0.5px,transparent_0.5px)] dark:bg-[radial-gradient(var(--color-slate-700)_0.5px,transparent_0.5px),radial-gradient(var(--color-slate-700)_0.5px,transparent_0.5px)]",
+              "bg-position-[0_0,10px_10px]",
+              "bg-size-[20px_20px]",
             )}
           />
           <div className="flex h-full flex-col">
-            <div className="relative flex-grow overflow-hidden">
+            <div className="relative grow overflow-hidden">
               <div className="flex h-full flex-col">
-                <div className="grid flex-grow grid-rows-(--grid-bodyFooter) overflow-hidden">
+                <div className="grid grow grid-rows-(--grid-bodyFooter) overflow-hidden">
                   <div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
                     <div className="relative flex h-full w-full items-center justify-center">
                       <div className="relative inline-block">
@@ -723,7 +723,7 @@ export default function WebRTCVideo() {
                                 isVideoLoading ||
                                 hdmiError ||
                                 peerConnectionState !== "connected",
-                              "!opacity-60": showPointerLockBar,
+                              "opacity-60!": showPointerLockBar,
                               "animate-slideUpFade border border-slate-800/30 shadow-xs dark:border-slate-300/20":
                                 isPlaying,
                             },
diff --git a/ui/src/index.css b/ui/src/index.css
index 1348c40..beacb34 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,5 +1,7 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
 @config "../tailwind.config.js";
+
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 @plugin "@headlessui/tailwindcss";
@@ -7,22 +9,11 @@
 /* Dark mode uses CSS selector instead of prefers-color-scheme */
 @custom-variant dark (&:where(.dark, .dark *));
 
-html {
-  @apply scroll-smooth;
-}
-
-html,
-body {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
 @theme {
-  --font-sans: "Circular", sans-serif;
-  --font-display: "Circular", sans-serif;
-  --font-serif: "Circular", serif;
-  --font-mono: "Source Code Pro Variable", monospace;
+  --font-sans: 'Circular', sans-serif;
+  --font-display: 'Circular', sans-serif;
+  --font-serif: 'Circular', serif;
+  --font-mono: 'Source Code Pro Variable', monospace;
 
   --grid-layout: auto 1fr auto;
   --grid-headerBody: auto 1fr;
@@ -140,15 +131,26 @@ body {
   animation-delay: --value(integer) ms;
 }
 
+html {
+  @apply scroll-smooth;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
 @property --grid-color-start {
   syntax: "<color>";
-  initial-value: theme("colors.blue.50/10");
+  initial-value: var(--color-blue-50/10);
   inherits: false;
 }
 
 @property --grid-color-end {
   syntax: "<color>";
-  initial-value: theme("colors.blue.50/100");
+  initial-value: var(--color-blue-50/100);
   inherits: false;
 }
 
@@ -164,8 +166,8 @@ body {
 }
 
 .group:hover .grid-card {
-  --grid-color-start: theme("colors.blue.100/50");
-  --grid-color-end: theme("colors.blue.50/50");
+  --grid-color-start: var(--color-blue-100/50);
+  --grid-color-end: var(--color-blue-50/50);
 }
 
 video::-webkit-media-controls {
@@ -173,11 +175,11 @@ video::-webkit-media-controls {
 }
 
 .hg-theme-default {
-  @apply !font-display font-normal;
+  @apply font-display! font-normal;
 }
 
 .hg-theme-default .hg-button {
-  @apply border !border-b border-slate-800/25 !border-b-slate-800/25 !shadow-xs;
+  @apply border border-b! border-slate-800/25 border-b-slate-800/25! shadow-xs!;
 }
 
 .hg-theme-default .hg-button span {
@@ -249,7 +251,7 @@ video::-webkit-media-controls {
 }
 
 .hg-button {
-  @apply dark:!bg-slate-800 dark:text-white;
+  @apply dark:bg-slate-800! dark:text-white;
 }
 
 .simple-keyboard-control .hg-button {
@@ -297,25 +299,21 @@ video::-webkit-media-controls {
 }
 
 .hg-button.hg-standardBtn[data-skbtn="Space"] {
-  @apply md:!w-[350px];
+  @apply md:w-[350px]!;
 }
 
 .hg-theme-default .hg-row .combination-key {
-  @apply inline-flex !h-auto !w-auto grow-0 py-1 text-xs;
-}
-
-.hg-theme-default .hg-row:has(.combination-key) {
-  /*margin-bottom: 100px !important;*/
+  @apply inline-flex h-auto! w-auto! grow-0 py-1 text-xs;
 }
 
 .hg-theme-default .hg-row .hg-button-container,
 .hg-theme-default .hg-row .hg-button:not(:last-child) {
-  @apply !mr-[2px] md:!mr-[5px];
+  @apply mr-[2px]! md:mr-[5px]!;
 }
 
 /* Hide the scrollbar by setting the scrollbar color to the background color */
 .xterm .xterm-viewport {
-  scrollbar-color: theme("colors.gray.900") #002b36;
+  scrollbar-color: var(--color-gray-900) #002b36;
   scrollbar-width: thin;
 }
 
diff --git a/ui/src/notifications.tsx b/ui/src/notifications.tsx
index 5677f42..5158d8d 100644
--- a/ui/src/notifications.tsx
+++ b/ui/src/notifications.tsx
@@ -22,7 +22,7 @@ const ToastContent = ({
   <Card
     className={`${
       t.visible ? "animate-enter" : "animate-leave"
-    } pointer-events-auto z-30 w-full max-w-sm !shadow-xl`}
+    } pointer-events-auto z-30 w-full max-w-sm shadow-xl!`}
   >
     <div className="flex items-center gap-x-2 p-2.5 px-2">
       {icon}
diff --git a/ui/src/routes/devices.$id.mount.tsx b/ui/src/routes/devices.$id.mount.tsx
index eb0a505..475b57b 100644
--- a/ui/src/routes/devices.$id.mount.tsx
+++ b/ui/src/routes/devices.$id.mount.tsx
@@ -185,7 +185,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
               <img
                 src={LogoWhiteIcon}
                 alt="JetKVM Logo"
-                className="hidden h-[24px] dark:!mt-0 dark:block"
+                className="hidden h-[24px] dark:mt-0! dark:block"
               />
               {modalView === "mode" && (
                 <ModeSelectionView
@@ -332,7 +332,7 @@ function ModeSelectionView({
                 {
                   "ring-2 ring-blue-700": selectedMode === mode,
                   "hover:ring-2 hover:ring-blue-500": selectedMode !== mode && !disabled,
-                  "!cursor-not-allowed": disabled,
+                  "cursor-not-allowed!": disabled,
                 },
               )}
             >
@@ -1489,7 +1489,7 @@ function PreUploadedImageItem({
             <div className="flex items-center gap-x-1 text-slate-600 dark:text-slate-400">
               {formatters.date(new Date(uploadedAt), { month: "short" })}
             </div>
-            <div className="mx-1 h-[10px] w-[1px] bg-slate-300 text-slate-300 dark:bg-slate-600"></div>
+            <div className="mx-1 h-[10px] w-px bg-slate-300 text-slate-300 dark:bg-slate-600"></div>
             <div className="text-gray-600 dark:text-slate-400">{size}</div>
           </div>
         </div>
diff --git a/ui/src/routes/devices.$id.settings.network.tsx b/ui/src/routes/devices.$id.settings.network.tsx
index b44636c..aebcd03 100644
--- a/ui/src/routes/devices.$id.settings.network.tsx
+++ b/ui/src/routes/devices.$id.settings.network.tsx
@@ -345,7 +345,7 @@ export default function SettingsNetworkRoute() {
           />
         </div>
 
-        <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
+        <div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
 
         <div className="space-y-4">
           <SettingsItem title="IPv4 Mode" description="Configure the IPv4 mode">
diff --git a/ui/src/routes/devices.$id.settings.tsx b/ui/src/routes/devices.$id.settings.tsx
index 641a64c..3d28dd5 100644
--- a/ui/src/routes/devices.$id.settings.tsx
+++ b/ui/src/routes/devices.$id.settings.tsx
@@ -111,7 +111,7 @@ export default function SettingsRoute() {
               {/* Gradient overlay for left side - only visible on mobile when scrolled */}
               <div
                 className={cx(
-                  "pointer-events-none absolute inset-y-0 left-0 z-10 w-8 bg-gradient-to-r from-white to-transparent transition-opacity duration-300 ease-in-out md:hidden dark:from-slate-900",
+                  "pointer-events-none absolute inset-y-0 left-0 z-10 w-8 bg-linear-to-r from-white to-transparent transition-opacity duration-300 ease-in-out md:hidden dark:from-slate-900",
                   {
                     "opacity-0": !showLeftGradient,
                     "opacity-100": showLeftGradient,
@@ -121,7 +121,7 @@ export default function SettingsRoute() {
               {/* Gradient overlay for right side - only visible on mobile when there's more content */}
               <div
                 className={cx(
-                  "pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-white to-transparent transition duration-300 ease-in-out md:hidden dark:from-slate-900",
+                  "pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-linear-to-l from-white to-transparent transition duration-300 ease-in-out md:hidden dark:from-slate-900",
                   {
                     "opacity-0": !showRightGradient,
                     "opacity-100": showRightGradient,
@@ -137,7 +137,7 @@ export default function SettingsRoute() {
                     to="general"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuSettings className="h-4 w-4 shrink-0" />
                       <h1>General</h1>
                     </div>
@@ -148,7 +148,7 @@ export default function SettingsRoute() {
                     to="mouse"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuKeyboard className="h-4 w-4 shrink-0" />
                       <h1>Mouse</h1>
                     </div>
@@ -159,7 +159,7 @@ export default function SettingsRoute() {
                     to="video"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuVideo className="h-4 w-4 shrink-0" />
                       <h1>Video</h1>
                     </div>
@@ -170,7 +170,7 @@ export default function SettingsRoute() {
                     to="hardware"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuCpu className="h-4 w-4 shrink-0" />
                       <h1>Hardware</h1>
                     </div>
@@ -181,7 +181,7 @@ export default function SettingsRoute() {
                     to="access"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuShieldCheck className="h-4 w-4 shrink-0" />
                       <h1>Access</h1>
                     </div>
@@ -192,7 +192,7 @@ export default function SettingsRoute() {
                     to="appearance"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuPalette className="h-4 w-4 shrink-0" />
                       <h1>Appearance</h1>
                     </div>
@@ -203,7 +203,7 @@ export default function SettingsRoute() {
                     to="macros"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuCommand className="h-4 w-4 shrink-0" />
                       <h1>Keyboard Macros</h1>
                     </div>
@@ -214,7 +214,7 @@ export default function SettingsRoute() {
                     to="network"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuNetwork className="h-4 w-4 shrink-0" />
                       <h1>Network</h1>
                     </div>
@@ -225,7 +225,7 @@ export default function SettingsRoute() {
                     to="advanced"
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                       <LuWrench className="h-4 w-4 shrink-0" />
                       <h1>Advanced</h1>
                     </div>
diff --git a/ui/src/routes/welcome-local.mode.tsx b/ui/src/routes/welcome-local.mode.tsx
index d3f9d3e..a29ee94 100644
--- a/ui/src/routes/welcome-local.mode.tsx
+++ b/ui/src/routes/welcome-local.mode.tsx
@@ -90,8 +90,8 @@ export default function WelcomeLocalModeRoute() {
                     <GridCard
                       key={mode}
                       cardClassName={cx("transition-all duration-100", {
-                        "!outline-blue-700 !outline-2": selectedMode === mode,
-                        "hover:!outline-blue-700": selectedMode !== mode,
+                        "outline-blue-700! outline-2!": selectedMode === mode,
+                        "hover:outline-blue-700!": selectedMode !== mode,
                       })}
                     >
                       <div
diff --git a/ui/src/routes/welcome-local.tsx b/ui/src/routes/welcome-local.tsx
index a0a5689..c516952 100644
--- a/ui/src/routes/welcome-local.tsx
+++ b/ui/src/routes/welcome-local.tsx
@@ -68,7 +68,7 @@ export default function WelcomeRoute() {
                     </div>
                   </div>
 
-                  <div className="!-mt-2 -ml-6 flex items-center justify-center">
+                  <div className="-mt-2! -ml-6 flex items-center justify-center">
                     <img
                       src={DeviceImage}
                       alt="JetKVM Device"
@@ -90,7 +90,7 @@ export default function WelcomeRoute() {
                       theme="light"
                       text="Set up your JetKVM"
                       LeadingIcon={({ className }) => (
-                        <img src={LogoMark} className={cx(className, "mr-1.5 !h-5")} />
+                        <img src={LogoMark} className={cx(className, "mr-1.5 h-5!")} />
                       )}
                       textAlign="center"
                       to="/welcome/mode"
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 1238a5c..d1d8351 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -1,4 +1,3 @@
-import defaultTheme from "tailwindcss/defaultTheme";
 import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
 import svgToDataUri from "mini-svg-data-uri";
 import plugin from "tailwindcss/plugin";