refactor: Migrate from tailwind.js config to Tailwind CSS config (#451)

adamshiervani · web-flow · commit baf85dcbec63 · 2025-05-15T17:13:16.000+02:00
* refactor: Migrate from tailwind.js config to Tailwind CSS configuration and improve component styling

- Removed extensive theme and animation configurations from tailwind.config.js, migrating them to index.css for better organization.
- Updated components to utilize CSS variables for grid layouts and animations, enhancing maintainability.
- Adjusted various components to reflect the new CSS structure, ensuring consistent styling across the application.
- Improved accessibility and responsiveness in several UI components, including headers and popovers.
- Fixed minor styling issues and optimized class usage for better performance.

* style: use default tailwindcss/forms options

* refactor(Header): remove unused LuUser icon import
diff --git a/ui/src/components/AuthLayout.tsx b/ui/src/components/AuthLayout.tsx
@@ -37,7 +37,7 @@ export default function AuthLayout({
     <>
       <GridBackground />
 
-      <div className="grid min-h-screen grid-rows-layout">
+      <div className="grid min-h-screen grid-rows-(--grid-layout)">
         <SimpleNavbar
           logoHref="/"
           actionElement={
diff --git a/ui/src/components/Checkbox.tsx b/ui/src/components/Checkbox.tsx
@@ -15,7 +15,7 @@ const checkboxVariants = cva({
     "block rounded",
 
     // Colors
-    "border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 text-blue-700 dark:text-blue-500 transition-colors",
+    "border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 checked:accent-blue-700 checked:dark:accent-blue-500 transition-colors",
 
     // Hover
     "hover:bg-slate-200/50 dark:hover:bg-slate-700/50",
@@ -41,7 +41,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckBoxProps>(function Checkbox(
   ref,
 ) {
   const classes = checkboxVariants({ size });
-  return <input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />;
+  return (
+    <input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />
+  );
 });
 Checkbox.displayName = "Checkbox";
 
diff --git a/ui/src/components/GridBackground.tsx b/ui/src/components/GridBackground.tsx
@@ -1,8 +1,8 @@
 export default function GridBackground() {
   return (
-    <div className="absolute w-screen h-screen overflow-hidden isolate opacity-60">
+    <div className="absolute isolate h-screen w-screen overflow-hidden opacity-60">
       <svg
-        className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-300 [mask-image:radial-gradient(center_at_32rem_32rem,white,transparent)] dark:stroke-slate-300/20"
+        className="absolute inset-x-0 top-0 -z-10 h-full w-full mask-radial-[32rem_32rem] mask-radial-from-white mask-radial-to-transparent mask-radial-at-center stroke-gray-300 dark:stroke-slate-300/20"
         aria-hidden="true"
       >
         <defs>
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
@@ -55,7 +55,7 @@ export default function DashboardNavbar({
   //picture = "https://placehold.co/32x32"
 
   return (
-    <div className="w-full select-none border-b border-b-slate-800/20 bg-white dark:border-b-slate-300/20 dark:bg-slate-900">
+    <div className="w-full border-b border-b-slate-800/20 bg-white select-none dark:border-b-slate-300/20 dark:bg-slate-900">
       <Container>
         <div className="flex h-14 items-center justify-between">
           <div className="flex shrink-0 items-center gap-x-8">
@@ -81,7 +81,7 @@ export default function DashboardNavbar({
           </div>
           <div className="flex w-full items-center justify-end gap-x-2">
             <div className="flex shrink-0 items-center space-x-4">
-              <div className="hidden items-center gap-x-2 md:flex">
+              <div className="hidden items-stretch gap-x-2 md:flex">
                 {showConnectionStatus && (
                   <>
                     <div className="w-[159px]">
@@ -100,47 +100,50 @@ export default function DashboardNavbar({
                 )}
                 {isLoggedIn ? (
                   <>
-                    <hr className="h-[20px] w-[1px] border-none bg-slate-800/20 dark:bg-slate-300/20" />
+                    <hr className="h-[20px] w-[1px] self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
                     <div className="relative inline-block text-left">
                       <Menu>
-                        <MenuButton>
-                          <Button className="flex items-center gap-x-3 rounded-md border bg-white dark:border-slate-600 dark:bg-slate-800 dark:text-white border-slate-800/20 px-2 py-1.5">
-                            {picture
-                              ? (
-                                <img
-                                  src={picture}
-                                  alt="Avatar"
-                                  className="size-6 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700"
-                                />
-                              )
-                              : (
-                                <span className="max-w-[200px] text-sm/6 font-display font-semibold truncate">
-                                  {userEmail}
-                                </span>
-                              )
-                            }
+                        <MenuButton className="h-full">
+                          <Button className="flex h-full items-center gap-x-3 rounded-md border border-slate-800/20 bg-white px-2 py-1.5 dark:border-slate-600 dark:bg-slate-800 dark:text-white">
+                            {picture ? (
+                              <img
+                                src={picture}
+                                alt="Avatar"
+                                className="size-6 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700"
+                              />
+                            ) : userEmail ? (
+                              <span className="font-display max-w-[200px] truncate text-sm/6 font-semibold">
+                                {userEmail}
+                              </span>
+                            ) : null}
                             <ChevronDownIcon className="size-4 shrink-0 text-slate-900 dark:text-white" />
                           </Button>
                         </MenuButton>
                         <MenuItems
                           transition
                           anchor="bottom end"
-                          className="right-0 mt-1 w-56 origin-top-right data-closed:opacity-0 focus:outline-hidden">
+                          className="right-0 mt-1 w-56 origin-top-right p-px focus:outline-hidden data-closed:opacity-0"
+                        >
                           <MenuItem>
                             <Card className="overflow-hidden">
-                              <div className="space-y-1 p-1 dark:text-white">
-                                {userEmail && (
+                              {userEmail && (
+                                <div className="space-y-1 p-1 dark:text-white">
                                   <div className="border-b border-b-slate-800/20 dark:border-slate-300/20">
                                     <div className="p-2">
-                                      <div className="font-display text-xs">Logged in as</div>
-                                      <div className="max-w-[200px] truncate font-display text-sm font-semibold">
+                                      <div className="font-display text-xs">
+                                        Logged in as
+                                      </div>
+                                      <div className="font-display max-w-[200px] truncate text-sm font-semibold">
                                         {userEmail}
                                       </div>
                                     </div>
                                   </div>
-                                )}
-                              </div>
-                              <div className="space-y-1 p-1 dark:text-white" onClick={onLogout}>
+                                </div>
+                              )}
+                              <div
+                                className="space-y-1 p-1 dark:text-white"
+                                onClick={onLogout}
+                              >
                                 <button className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
                                   <ArrowLeftEndOnRectangleIcon className="size-4" />
                                   <div className="font-display">Log out</div>
diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
@@ -673,7 +673,7 @@ export default function WebRTCVideo() {
   ]);
 
   return (
-    <div className="grid h-full w-full grid-rows-layout">
+    <div className="grid h-full w-full grid-rows-(--grid-layout)">
       <div className="flex min-h-[39.5px] flex-col">
         <div className="flex flex-col">
           <fieldset
@@ -699,7 +699,7 @@ export default function WebRTCVideo() {
           <div className="flex h-full flex-col">
             <div className="relative flex-grow overflow-hidden">
               <div className="flex h-full flex-col">
-                <div className="grid flex-grow grid-rows-bodyFooter overflow-hidden">
+                <div className="grid flex-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">
diff --git a/ui/src/components/popovers/ExtensionPopover.tsx b/ui/src/components/popovers/ExtensionPopover.tsx
@@ -84,7 +84,7 @@ export default function ExtensionPopover() {
   return (
     <GridCard>
       <div className="space-y-4 p-4 py-3">
-        <div className="grid h-full grid-rows-headerBody">
+        <div className="grid h-full grid-rows-(--grid-headerBody)">
           <div className="space-y-4">
             {activeExtension ? (
               // Extension Control View
diff --git a/ui/src/components/popovers/MountPopover.tsx b/ui/src/components/popovers/MountPopover.tsx
@@ -194,7 +194,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
   return (
     <GridCard>
       <div className="space-y-4 p-4 py-3">
-        <div ref={ref} className="grid h-full grid-rows-headerBody">
+        <div ref={ref} className="grid h-full grid-rows-(--grid-headerBody)">
           <div className="h-full space-y-4">
             <div className="space-y-4">
               <SettingsPageHeader
diff --git a/ui/src/components/popovers/PasteModal.tsx b/ui/src/components/popovers/PasteModal.tsx
@@ -74,7 +74,7 @@ export default function PasteModal() {
   return (
     <GridCard>
       <div className="space-y-4 p-4 py-3">
-        <div className="grid h-full grid-rows-headerBody">
+        <div className="grid h-full grid-rows-(--grid-headerBody)">
           <div className="h-full space-y-4">
             <div className="space-y-4">
               <SettingsPageHeader
diff --git a/ui/src/components/popovers/WakeOnLan/Index.tsx b/ui/src/components/popovers/WakeOnLan/Index.tsx
@@ -102,7 +102,7 @@ export default function WakeOnLanModal() {
   return (
     <GridCard>
       <div className="space-y-4 p-4 py-3">
-        <div className="grid h-full grid-rows-headerBody">
+        <div className="grid h-full grid-rows-(--grid-headerBody)">
           <div className="space-y-4">
             <SettingsPageHeader
               title="Wake On LAN"
diff --git a/ui/src/components/sidebar/connectionStats.tsx b/ui/src/components/sidebar/connectionStats.tsx
@@ -99,7 +99,7 @@ export default function ConnectionStatsSidebar() {
   }, 500);
 
   return (
-    <div className="grid h-full grid-rows-headerBody shadow-xs">
+    <div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
       <SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
       <div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
         <div className="space-y-4">
diff --git a/ui/src/index.css b/ui/src/index.css
@@ -1,5 +1,11 @@
 @import "tailwindcss";
 @config "../tailwind.config.js";
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms";
+@plugin "@headlessui/tailwindcss";
+
+/* Dark mode uses CSS selector instead of prefers-color-scheme */
+@custom-variant dark (&:where(.dark, .dark *));
 
 html {
   @apply scroll-smooth;
@@ -12,6 +18,128 @@ body {
   overflow: auto;
 }
 
+@theme {
+  --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;
+  --grid-bodyFooter: 1fr auto;
+  --grid-sidebar: 1fr minmax(360px, 25%);
+
+  --breakpoint-xs: 480px;
+  --breakpoint-2xl: 1440px;
+  --breakpoint-3xl: 1920px;
+  --breakpoint-4xl: 2560px;
+
+  /* Migrated animations */
+  --animate-enter: enter 0.2s ease-out;
+  --animate-leave: leave 0.15s ease-in forwards;
+  --animate-fadeInScale: fadeInScale 1s ease-out forwards;
+  --animate-fadeInScaleFloat:
+    fadeInScaleFloat 1s ease-out forwards, float 3s ease-in-out infinite;
+  --animate-fadeIn: fadeIn 1s ease-out forwards;
+  --animate-slideUpFade: slideUpFade 1s ease-out forwards;
+
+  --container-8xl: 88rem;
+  --container-9xl: 96rem;
+  --container-10xl: 104rem;
+  --container-11xl: 112rem;
+  --container-12xl: 120rem;
+
+  /* Migrated keyframes */
+  @keyframes enter {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes leave {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fadeInScale {
+    0% {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes fadeInScaleFloat {
+    0% {
+      opacity: 0;
+      transform: scale(0.98) translateY(10px);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    70% {
+      opacity: 0.8;
+      transform: translateY(1px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideUpFade {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+@utility max-width-* {
+  max-width: --modifier(--container- *, [length], [ *]);
+}
+
+/* Ensure there is not a `ms` and ms -> `...)ms` */
+@utility animation-delay-* {
+  animation-delay: --value(integer) ms;
+}
+
 @property --grid-color-start {
   syntax: "<color>";
   initial-value: theme("colors.blue.50/10");
diff --git a/ui/src/routes/devices.$id.deregister.tsx b/ui/src/routes/devices.$id.deregister.tsx
@@ -71,7 +71,7 @@ export default function DevicesIdDeregister() {
   const error = useActionData() as { message: string };
 
   return (
-    <div className="grid min-h-screen grid-rows-layout">
+    <div className="grid min-h-screen grid-rows-(--grid-layout)">
       <DashboardNavbar
         isLoggedIn={!!user}
         primaryLinks={[{ title: "Cloud Devices", to: "/devices" }]}
diff --git a/ui/src/routes/devices.$id.rename.tsx b/ui/src/routes/devices.$id.rename.tsx
@@ -75,7 +75,7 @@ export default function DeviceIdRename() {
   const error = useActionData() as { message: string };
 
   return (
-    <div className="grid min-h-screen grid-rows-layout">
+    <div className="grid min-h-screen grid-rows-(--grid-layout)">
       <DashboardNavbar
         isLoggedIn={!!user}
         primaryLinks={[{ title: "Cloud Devices", to: "/devices" }]}
diff --git a/ui/src/routes/devices.$id.setup.tsx b/ui/src/routes/devices.$id.setup.tsx
@@ -56,7 +56,7 @@ export default function SetupRoute() {
   return (
     <>
       <GridBackground />
-      <div className="grid min-h-screen grid-rows-layout">
+      <div className="grid min-h-screen grid-rows-(--grid-layout)">
         <SimpleNavbar />
         <Container>
           <div className="flex items-center justify-center w-full h-full isolate">
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
@@ -795,7 +795,7 @@ export default function KvmIdRoute() {
           </div>
         </FocusTrap>
 
-        <div className="grid h-full select-none grid-rows-headerBody">
+        <div className="grid h-full grid-rows-(--grid-headerBody) select-none">
           <DashboardNavbar
             primaryLinks={isOnDevice ? [] : [{ title: "Cloud Devices", to: "/devices" }]}
             showConnectionStatus={true}
@@ -809,7 +809,7 @@ export default function KvmIdRoute() {
             <WebRTCVideo />
             <div
               style={{ animationDuration: "500ms" }}
-              className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center p-4"
+              className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center p-4"
             >
               <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
                 {!!ConnectionStatusElement && ConnectionStatusElement}
diff --git a/ui/src/routes/devices.already-adopted.tsx b/ui/src/routes/devices.already-adopted.tsx
@@ -8,7 +8,7 @@ export default function DevicesAlreadyAdopted() {
     <>
       <GridBackground />
 
-      <div className="grid min-h-screen grid-rows-layout">
+      <div className="grid min-h-screen grid-rows-(--grid-layout)">
         <SimpleNavbar />
         <Container>
           <div className="flex items-center justify-center w-full h-full isolate">
diff --git a/ui/src/routes/devices.tsx b/ui/src/routes/devices.tsx
diff --git a/ui/src/routes/login-local.tsx b/ui/src/routes/login-local.tsx
diff --git a/ui/src/routes/welcome-local.mode.tsx b/ui/src/routes/welcome-local.mode.tsx
diff --git a/ui/src/routes/welcome-local.password.tsx b/ui/src/routes/welcome-local.password.tsx
diff --git a/ui/src/routes/welcome-local.tsx b/ui/src/routes/welcome-local.tsx
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
