Migrate to Tailwind CSS v4.0 (#6331)

Author: bilalabbad

frontend/app/package-lock.json

@@ -51,12 +51,12 @@
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.2.0",
+    "@tailwindcss/vite": "^4.1.4",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-query-devtools": "^5.74.4",
     "@tanstack/react-table": "^8.21.3",
     "@uiw/react-color": "^2.4.5",
     "@vitejs/plugin-react": "^4.4.0",
-    "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "cm6-graphql": "^0.2.0",
@@ -93,7 +93,7 @@
     "remark-gfm": "^4.0.1",
     "remeda": "^2.21.3",
     "sha1": "^1.1.1",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
     "unidiff": "^1.0.4",
     "use-query-params": "^2.2.1",
@@ -118,8 +118,7 @@
     "cypress": "^14.3.0",
     "openapi-typescript": "^7.6.1",
     "playwright": "^1.52.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
     "vitest": "^3.1.1",

frontend/app/package.json

@@ -1,13 +1,20 @@
-@import "./Alert.css";
-@import "./DiffView.css";
+@import "./Alert.css" layer(base);
+@import "./DiffView.css" layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config '../../../tailwind.config.js';
 
 @font-face {
   font-family: "Inter";
-  src: url(/src/assets/fonts/Inter-VariableFont_opsz\,wght.ttf);
+  src: url(/src/assets/fonts/InterVariable.ttf);
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 }
 
 body {

frontend/app/postcss.config.js

@@ -17,7 +17,7 @@ export function ArtifactDetailsMenu({ id, hfid, checksum, storageId }: ArtifactD
         <DropdownMenuItem className="p-0">
           <CopyToClipboard
             size={"default"}
-            className="flex-grow justify-start gap-2 p-2"
+            className="grow justify-start gap-2 p-2"
             text={checksum}
           >
             Copy Checksum
@@ -29,7 +29,7 @@ export function ArtifactDetailsMenu({ id, hfid, checksum, storageId }: ArtifactD
         <DropdownMenuItem className="p-0">
           <CopyToClipboard
             size={"default"}
-            className="flex-grow justify-start gap-2 p-2"
+            className="grow justify-start gap-2 p-2"
             text={storageId}
           >
             Copy Storage ID

frontend/app/src/app/styles/index.css

@@ -65,7 +65,7 @@ export function ArtifactsDetails({ artifactId, artifactSchema }: ArtifactsDetail
         </div>
       </Content.Card>
       <Card className="min-w-[350px] p-0">
-        <div className="font-semibold p-2 border-b">Activities</div>
+        <div className="font-semibold p-2 border-b  border-gray-200">Activities</div>
         <NodeEvents objectId={artifactId} objectKind={artifactKind} />
       </Card>
     </div>

frontend/app/src/assets/fonts/Inter-VariableFont_opsz,wght.ttf renamed to frontend/app/src/assets/fonts/InterVariable.ttf

@@ -83,14 +83,14 @@ function FileContent({
     }
     case "image/svg+xml": {
       return (
-        <Svg value={fileContent} className="border shadow border-neutral-700 rounded-lg grow" />
+        <Svg value={fileContent} className="border shadow-sm border-neutral-700 rounded-lg grow" />
       );
     }
     default: {
       return (
         <ScrollArea
           scrollX
-          className="border shadow border-neutral-700 rounded-lg grow"
+          className="border shadow-sm border-neutral-700 rounded-lg grow"
           scrollBarClassName="bg-transparent"
         >
           <CodeViewer language={config.language} customStyle={{ margin: 0 }}>

frontend/app/src/entities/artifacts/ui/artifact-details-menu.tsx

@@ -33,7 +33,7 @@ export const ProviderButton = ({
 }: { provider: SSOProvider; redirectTo?: string }) => {
   return (
     <a
-      className="h-9 px-4 py-2 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium disabled:opacity-60 disabled:cursor-not-allowed border bg-custom-white shadow-sm hover:bg-gray-100"
+      className="h-9 px-4 py-2 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium disabled:opacity-60 disabled:cursor-not-allowed border border-gray-200 bg-white shadow-xs hover:bg-gray-100"
       href={`${INFRAHUB_API_SERVER_URL + provider.authorize_path}?final_url=${redirectTo}`}
     >
       <Icon icon={provider.icon} />

frontend/app/src/entities/artifacts/ui/artifact-details.tsx

@@ -43,7 +43,7 @@ const BranchesItems = () => {
         {branches.map((branch) => (
           <li
             key={branch.name}
-            className="col-span-1 rounded-lg border cursor-pointer bg-gray-50 hover:bg-gray-100"
+            className="col-span-1 rounded-lg border border-gray-200 cursor-pointer bg-gray-50 hover:bg-gray-100"
             onClick={() => navigate(constructPath(`/branches/${branch.name}`))}
           >
             <div className="flex w-full items-center justify-between space-x-6 p-6">