[BREAKING] Chore: upgrade to tailwind v4

package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",
-    "autoprefixer": "^10.4.20",
+    "@tailwindcss/postcss": "^4.0.9",
     "eslint": "^9.21.0",
     "eslint-config-next": "^15.1.7",
     "eslint-config-prettier": "^10.0.2",
@@ -55,8 +55,8 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "postcss": "^8.5.2",
     "prettier": "^3.5.2",
-    "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.4.17",
+    "tailwind-scrollbar": "^4.0.1",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.7.3"
   },
   "optionalDependencies": {

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

src/components/bookmarks/group.jsx

@@ -34,7 +34,7 @@ export default function BookmarksGroup({
             {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 bookmark-group-icon">
+                  <div className="shrink-0 mr-2 w-7 h-7 bookmark-group-icon">
                     <ResolvedIcon icon={layout.icon} />
                   </div>
                 )}
@@ -52,7 +52,7 @@ export default function BookmarksGroup({
             )}
             <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/bookmarks/item.jsx

@@ -20,9 +20,10 @@ export default function Item({ bookmark, iconOnly = false }) {
         rel="noreferrer"
         target={bookmark.target ?? settings.target ?? "_blank"}
         className={classNames(
-          settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
+          settings.cardBlur !== undefined &&
+            `backdrop-blur-sm${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
           "text-left cursor-pointer transition-all 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",
-          iconOnly ? "h-[60px] w-[60px] grid" : "block w-full h-15 mb-3",
+          iconOnly ? "h-[60px] w-[60px] grid" : "block w-full h-8 mb-3",
         )}
       >
         {iconOnly ? (
@@ -36,9 +37,9 @@ export default function Item({ bookmark, iconOnly = false }) {
           </div>
         ) : (
           <div className="flex">
-            <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
+            <div className="shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
               {bookmark.icon && (
-                <div className="flex-shrink-0 w-5 h-5">
+                <div className="shrink-0 w-5 h-5">
                   <ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
                 </div>
               )}

src/components/quicklaunch.jsx

@@ -254,10 +254,10 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
       role="dialog"
       aria-modal="true"
     >
-      <div className="fixed inset-0 bg-gray-500 bg-opacity-50" />
+      <div className="fixed inset-0 bg-gray-500 opacity-50" />
       <div className="fixed inset-0 z-20 overflow-y-auto">
         <div className="flex min-h-full min-w-full items-start justify-center text-center">
-          <dialog className="mt-[10%] min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block 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-50 dark:bg-theme-800">
+          <dialog className="mt-[10%] mx-auto min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block 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-50 dark:bg-theme-800">
             <input
               placeholder="Search"
               className={classNames(

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>

src/components/toggles/color.jsx

@@ -39,7 +39,7 @@ export default function ColorToggle() {
   return (
     <div id="color" className="w-full self-center">
       <Popover className="relative flex items-center">
-        <Popover.Button className="outline-none">
+        <Popover.Button className="outline-hidden">
           <IoColorPalette
             className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
             aria-hidden="true"

src/components/widgets/search/search.jsx

@@ -191,7 +191,7 @@ export default function Search({ options }) {
               <div>
                 <Listbox.Button
                   className="
-                  absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
+                  absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2
                   text-white font-medium text-sm
                   bg-theme-600/40 dark:bg-white/10
                   focus:ring-theme-500 dark:focus:ring-white/50"
@@ -212,7 +212,7 @@ export default function Search({ options }) {
                 <Listbox.Options
                   className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
                   bg-theme-100 dark:bg-theme-600 shadow-lg
-                  ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  ring-1 ring-black ring-opacity-5 focus:outline-hidden"
                 >
                   <div className="flex flex-col">
                     {availableProviderIds.map((providerId) => {

src/components/widgets/stocks/stocks.jsx

@@ -40,7 +40,7 @@ export default function Widget({ options }) {
           <button
             type="button"
             onClick={() => setViewingPercentChange(!viewingPercentChange)}
-            className="flex items-center w-full h-full hover:outline-none focus:outline-none"
+            className="flex items-center w-full h-full hover:outline-hidden focus:outline-hidden"
           >
             <FaChartLine className="flex-none w-5 h-5 text-theme-800 dark:text-theme-200 mr-2" />
             <div className="flex flex-wrap items-center gap-0.5">
@@ -49,7 +49,7 @@ export default function Widget({ options }) {
                   stock && (
                     <div
                       key={stock.ticker}
-                      className="rounded h-full text-xs px-1 w-[4.75rem] flex flex-col items-center justify-center"
+                      className="rounded-sm h-full text-xs px-1 w-[4.75rem] flex flex-col items-center justify-center"
                     >
                       <span className="text-theme-800 dark:text-theme-200 text-xs">
                         {stock.ticker.split(":").pop()}

src/components/widgets/widget/container.jsx

@@ -13,7 +13,7 @@ export function getAllClasses(options, additionalClassNames = "") {
       // eslint-disable-next-line no-param-reassign
       additionalClassNames = [
         additionalClassNames,
-        `backdrop-blur${options.style.cardBlur.length ? "-" : ""}${options.style.cardBlur}`,
+        `backdrop-blur-sm${options.style.cardBlur.length ? "-" : ""}${options.style.cardBlur}`,
       ].join(" ");
     }
 

src/pages/index.jsx

@@ -303,7 +303,7 @@ function Home({ initialSettings }) {
               className={classNames(
                 "sm:flex rounded-md bg-theme-100/20 dark:bg-white/5",
                 settings.cardBlur !== undefined &&
-                  `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
+                  `backdrop-blur-sm${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
               )}
               id="myTab"
               data-tabs-toggle="#myTabContent"
@@ -432,7 +432,7 @@ function Home({ initialSettings }) {
             headerStyles[headerStyle],
             settings.cardBlur !== undefined &&
               headerStyle === "boxed" &&
-              `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
+              `backdrop-blur-sm${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
           )}
         >
           <div id="widgets-wrap" className={classNames("flex flex-row w-full flex-wrap justify-between gap-x-2")}>
@@ -536,7 +536,9 @@ export default function Wrapper({ initialSettings, fallback }) {
           className={classNames(
             "fixed overflow-auto w-full h-full",
             backgroundBlur &&
-              `backdrop-blur${initialSettings.background.blur.length ? "-" : ""}${initialSettings.background.blur}`,
+              `backdrop-blur-sm${initialSettings.background.blur.length ? "-" : ""}${
+                initialSettings.background.blur - sm
+              }`,
             backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
             backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
           )}

src/styles/globals.css

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 #__next {
   width: 100%;

src/widgets/calendar/event.jsx

@@ -26,7 +26,7 @@ export default function Event({ event, colorVariants, showDate = false, showTime
         </span>
       )}
       <span className="ml-2 h-2 w-2">
-        <span className={classNames("block w-2 h-2 rounded", colorVariants[event.color] ?? "gray")} />
+        <span className={classNames("block w-2 h-2 rounded-sm", colorVariants[event.color] ?? "gray")} />
       </span>
       <div className="ml-2 h-5 text-left relative truncate" style={{ width: "70%" }}>
         <div className="absolute mt-0.5 text-xs">{hover && event.additional ? event.additional : event.title}</div>