Chore: upgrade to tailwind v4 (#4863)

src/components/services/dropdown.jsx

@@ -7,7 +7,7 @@ export default function Dropdown({ options, value, setValue }) {
   return (
     <Menu as="div" className="relative inline-block text-left">
       <div>
-        <Menu.Button className="text-xs inline-flex w-full items-center rounded bg-theme-200/50 dark:bg-theme-900/20 px-3 py-1.5">
+        <Menu.Button className="text-xs inline-flex w-full items-center rounded-sm bg-theme-200/50 dark:bg-theme-900/20 px-3 py-1.5">
           {options.find((option) => option.value === value).label}
           <BiCog className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
         </Menu.Button>
@@ -22,7 +22,7 @@ export default function Dropdown({ options, value, setValue }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-200/50 dark:bg-theme-900/50 backdrop-blur shadow-md focus:outline-none text-theme-700 dark:text-theme-200">
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-200/50 dark:bg-theme-900/50 backdrop-blur-sm shadow-md focus:outline-hidden text-theme-700 dark:text-theme-200">
           <div className="py-1">
             {options.map((option) => (
               <Menu.Item key={option.value} as={Fragment}>
@@ -33,7 +33,7 @@ export default function Dropdown({ options, value, setValue }) {
                   type="button"
                   className={classNames(
                     value === option.value ? "bg-theme-300/40 dark:bg-theme-900/40" : "",
-                    "w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 hover:dark:bg-theme-900/70 text-left",
+                    "w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 dark:hover:bg-theme-900/70 text-left",
                   )}
                 >
                   {option.label}

src/components/services/group.jsx

@@ -42,7 +42,7 @@ export default function ServicesGroup({
             {layout?.header !== false && (
               <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
                 {layout?.icon && (
-                  <div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon">
+                  <div className="shrink-0 mr-2 w-7 h-7 service-group-icon">
                     <ResolvedIcon icon={layout.icon} />
                   </div>
                 )}
@@ -60,7 +60,7 @@ export default function ServicesGroup({
             )}
             <Transition
               // Otherwise the transition group does display: none and cancels animation
-              className="!block"
+              className="block!"
               unmount={false}
               beforeLeave={() => {
                 panel.current.style.height = `${panel.current.scrollHeight}px`;

src/components/services/item.jsx

@@ -34,7 +34,8 @@ export default function Item({ service, groupName, useEqualHeights }) {
     <li key={service.name} id={service.id} className="service" data-name={service.name || ""}>
       <div
         className={classNames(
-          settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
+          settings.cardBlur !== undefined &&
+            `backdrop-blur-sm${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
           useEqualHeights && "h-[calc(100%-0.5rem)]",
           "transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
         )}
@@ -46,13 +47,13 @@ export default function Item({ service, groupName, useEqualHeights }) {
                 href={service.href}
                 target={service.target ?? settings.target ?? "_blank"}
                 rel="noreferrer"
-                className="flex-shrink-0 flex items-center justify-center w-12 service-icon z-10"
+                className="shrink-0 flex items-center justify-center w-12 service-icon z-10"
                 aria-label={service.icon}
               >
                 <ResolvedIcon icon={service.icon} />
               </a>
             ) : (
-              <div className="flex-shrink-0 flex items-center justify-center w-12 service-icon z-10">
+              <div className="shrink-0 flex items-center justify-center w-12 service-icon z-10">
                 <ResolvedIcon icon={service.icon} />
               </div>
             ))}
@@ -88,14 +89,14 @@ export default function Item({ service, groupName, useEqualHeights }) {
             } z-10 service-tags`}
           >
             {service.ping && (
-              <div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
+              <div className="shrink-0 flex items-center justify-center service-tag service-ping">
                 <Ping groupName={groupName} serviceName={service.name} style={statusStyle} />
                 <span className="sr-only">Ping status</span>
               </div>
             )}
 
             {service.siteMonitor && (
-              <div className="flex-shrink-0 flex items-center justify-center service-tag service-site-monitor">
+              <div className="shrink-0 flex items-center justify-center service-tag service-site-monitor">
                 <SiteMonitor groupName={groupName} serviceName={service.name} style={statusStyle} />
                 <span className="sr-only">Site monitor status</span>
               </div>
@@ -105,7 +106,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
               <button
                 type="button"
                 onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
-                className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
+                className="shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
               >
                 <Status service={service} style={statusStyle} />
                 <span className="sr-only">View container stats</span>
@@ -115,7 +116,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
               <button
                 type="button"
                 onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
-                className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
+                className="shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
               >
                 <KubernetesStatus service={service} style={statusStyle} />
                 <span className="sr-only">View container stats</span>
@@ -127,7 +128,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
         {service.container && service.server && (
           <div
             className={classNames(
-              showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-[0] opacity-0",
+              showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-0 opacity-0",
               "w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
             )}
           >
@@ -139,7 +140,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
         {service.app && (
           <div
             className={classNames(
-              showStats || (statsOpen && !statsClosing) ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
+              showStats || (statsOpen && !statsClosing) ? "max-h-[55px] opacity-100" : " max-h-0 opacity-0",
               "w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
             )}
           >

src/components/services/widget.jsx

@@ -19,7 +19,7 @@ export default function Widget({ widget, service }) {
   }
 
   return (
-    <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1 service-missing">
+    <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center p-1 service-missing">
       <div className="font-thin text-sm">{t("widget.missing_type", { type: widget.type })}</div>
     </div>
   );

src/components/services/widget/block.jsx

@@ -7,7 +7,7 @@ export default function Block({ value, label }) {
   return (
     <div
       className={classNames(
-        "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
+        "bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
         value === undefined ? "animate-pulse" : "",
         "service-block",
       )}

src/components/services/widget/error.jsx

@@ -22,13 +22,13 @@ export default function Error({ error }) {
 
   return (
     <details className="px-1 pb-1">
-      <summary className="block text-center mt-1 mb-0 mx-auto p-3 rounded bg-rose-900/80 hover:bg-rose-900/95 text-theme-900 cursor-pointer">
+      <summary className="block text-center mt-1 mb-0 mx-auto p-3 rounded-sm bg-rose-900/80 hover:bg-rose-900/95 text-theme-900 cursor-pointer">
         <div className="flex items-center justify-center text-xs font-bold">
           <IoAlertCircle className="mr-1 w-5 h-5" />
           {t("widget.api_error")} {error.message && t("widget.information")}
         </div>
       </summary>
-      <div className="bg-white dark:bg-theme-200/50 mt-2 rounded text-rose-900 text-xs font-mono whitespace-pre-wrap break-all">
+      <div className="bg-white dark:bg-theme-200/50 mt-2 rounded-sm text-rose-900 text-xs font-mono whitespace-pre-wrap break-all">
         <ul className="p-4">
           {error.message && (
             <li>