feat(chore): migrate to tailwindcss4 #1521 (#1522)

Author: mikbry

package-lock.json

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.mjs';
+
+/*
+  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);
+  }
+}
 
 /* https://ui.shadcn.com/themes */
 @layer base {

webapp/app/globals.css

@@ -109,7 +109,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="flex h-screen w-full select-none overflow-hidden">
+    <div className="flex h-screen w-full overflow-hidden select-none">
       <TooltipProvider>
         <Sidebar />
         <div className="flex grow flex-col">

webapp/components/Layout.tsx

@@ -30,7 +30,7 @@ export default function ButtonCard({
   const container = (
     <div className="flex h-full w-full flex-col gap-2 p-4">
       <div className={`${cssTitle}min-h-[24px] w-full text-xl font-bold`}>{title}</div>
-      <div className={`${cssDesc}aspect-[4/3] text-base text-secondary-foreground`}>
+      <div className={`${cssDesc}aspect-4/3 text-secondary-foreground text-base`}>
         <p className="line-clamp-4">{description}</p>
       </div>
     </div>
@@ -50,7 +50,7 @@ export default function ButtonCard({
       onClick={disabled ? undefined : onClick}
       className={`${
         selected ? `${cname} border-2` : `${cname}`
-      } m-2 h-full w-full overflow-hidden rounded bg-muted`}
+      } bg-muted m-2 h-full w-full overflow-hidden rounded`}
     >
       {container}
     </div>

webapp/components/common/ButtonCard/index.tsx

@@ -37,7 +37,7 @@ export default function Header({ header, toolbar }: ToolbarProps) {
 
   return (
     <div
-      className="flex h-11 w-full flex-row items-center justify-between gap-1 bg-secondary/70 p-2 text-sm"
+      className="bg-secondary/70 flex h-11 w-full flex-row items-center justify-between gap-1 p-2 text-sm"
       data-tauri-drag-region={isTitlebarTransparent}
     >
       <div

webapp/components/common/ContentView/Header.tsx

@@ -33,7 +33,7 @@ export default function ContentView({
 }: ContentViewProps) {
   // const { t } = useTranslation();
   return (
-    <div className={cn('flex h-full flex-col bg-secondary/20', className)}>
+    <div className={cn('bg-secondary/20 flex h-full flex-col', className)}>
       {(header || toolbar) && <Header header={header || selectedId || ''} toolbar={toolbar} />}
       {children}
     </div>

webapp/components/common/ContentView/index.tsx

@@ -73,7 +73,7 @@ function EmptyView({
       <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
         {icon}
         <h3 className="mt-4 text-lg font-extrabold">{title}</h3>
-        <p className="mb-4 mt-2 text-sm text-muted-foreground">{description}</p>
+        <p className="text-muted-foreground mt-2 mb-4 text-sm">{description}</p>
         {buttonLabel && <Button onClick={onCreateItem}>{buttonLabel}</Button>}
         {actions && (
           <div className="flex gap-2">{actions.map((action) => renderAction(action))}</div>

webapp/components/common/EmptyView/index.tsx

@@ -49,9 +49,9 @@ function ExplorerGroup({
               strokeWidth={1.5}
             />
           </Button>
-          <div className="flex w-full flex-grow items-center justify-between gap-1 overflow-hidden p-0 pl-2">
+          <div className="flex w-full grow items-center justify-between gap-1 overflow-hidden p-0 pl-2">
             {typeof title === 'string' && (
-              <div className="line-clamp-1 text-ellipsis break-all text-sm capitalize text-muted-foreground">
+              <div className="text-muted-foreground line-clamp-1 text-sm break-all text-ellipsis capitalize">
                 {t(title)}
               </div>
             )}

webapp/components/common/Explorer/ExplorerGroup.tsx

@@ -92,7 +92,7 @@ export default function ExplorerList<T>({
     <ScrollArea className="h-full">
       <ul
         className={cn(
-          'flex flex-col break-all rounded-md px-1 py-3 text-sm dark:border-white/20',
+          'flex flex-col rounded-md px-1 py-3 text-sm break-all dark:border-white/20',
           className,
         )}
       >
@@ -103,7 +103,7 @@ export default function ExplorerList<T>({
               key={`${item.id}-${item.name}`}
               className={cn(
                 selectedId === item.id ? 'text-foreground' : 'text-muted-foreground',
-                'rounded-md px-2 py-2 transition-colors duration-200 hover:bg-foreground/10',
+                'hover:bg-foreground/10 rounded-md px-2 py-2 transition-colors duration-200',
               )}
             >
               {menuItems && menuItems.length > 0 ? (

webapp/components/common/Explorer/ExplorerList.tsx

@@ -47,7 +47,7 @@ export default function Explorer({
 
   const isTitlebarTransparent = isMac();
   return (
-    <div className="flex h-full w-full flex-1 items-start border-r-[1px] bg-secondary/70">
+    <div className="bg-secondary/70 flex h-full w-full flex-1 items-start border-r-[1px]">
       <nav className="flex h-full flex-1 flex-col">
         <div className="flex w-full items-center">
           <div