feat(deps): update dependencies tailwindcss from v3.4.17 to v4 (#614)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Dan Adajian <[email protected]>

app/bunfig.toml

@@ -0,0 +1,2 @@
+[serve.static]
+plugins = ["bun-plugin-tailwind"]

app/frontend/components/images-view/single-image-view.tsx

@@ -46,7 +46,7 @@ export const SingleImageView: React.FC<SingleImageViewProps> = ({
   }
 
   return (
-    <div className="mb-12 mt-5 flex justify-center">
+    <div className="mt-5 mb-12 flex justify-center">
       <div className="relative">
         <LazyImage
           src={selectedImage.url}

app/frontend/components/loader.tsx

@@ -3,7 +3,7 @@ import { Island } from './island';
 
 export const Loader: React.FC = () => {
   return (
-    <div className="absolute bottom-0 left-0 right-0 top-0 backdrop-blur-sm">
+    <div className="absolute top-0 right-0 bottom-0 left-0 backdrop-blur-sm">
       <div className="sticky top-1/3 flex justify-center">
         <div className="w-full max-w-60 animate-pulse">
           <Island />

app/frontend/components/update-images-button.tsx

@@ -58,7 +58,7 @@ export const UpdateImagesButton: React.FC<{ disabled: boolean }> = ({
     'WARNING: This will update the base images in S3 and will set the visual regression status to passed. You can only do this if you are about to merge your PR and all other checks have passed.';
   const dialogContent = (
     <>
-      <Dialog.Title as="h3" className="mt-2 text-xl font-semibold leading-6">
+      <Dialog.Title as="h3" className="mt-2 text-xl leading-6 font-semibold">
         {dialogTitleText}
       </Dialog.Title>
       <Dialog.Description className="mt-5 text-lg font-semibold text-slate-500">
@@ -91,7 +91,7 @@ export const UpdateImagesButton: React.FC<{ disabled: boolean }> = ({
       </svg>
       <Dialog.Title
         as="h3"
-        className="text-lg font-medium leading-6 text-gray-900"
+        className="text-lg leading-6 font-medium text-gray-900"
       >
         Updating base images...
       </Dialog.Title>
@@ -132,7 +132,7 @@ export const UpdateImagesButton: React.FC<{ disabled: boolean }> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
+            <div className="bg-opacity-25 fixed inset-0 bg-black" />
           </Transition.Child>
 
           <div className="fixed inset-0 overflow-y-auto">

app/frontend/components/view-toggle.tsx

@@ -34,15 +34,15 @@ export const ViewToggle: React.FC<ViewToggleProps> = ({
     <>
       <SideBySideButton
         backgroundFilled
-        className="rounded-e-none rounded-s-md"
+        className="rounded-s-md rounded-e-none"
         onClick={() => onSelectView(ImageViews.SIDE_BY_SIDE)}
         disabled={availableView === AvailableViews.SINGLE}
       >
         Side-by-side
       </SideBySideButton>
       <SingleButton
         backgroundFilled
-        className="rounded-e-md rounded-s-none"
+        className="rounded-s-none rounded-e-md"
         onClick={() => {
           if (selectedView === ImageViews.SIDE_BY_SIDE) {
             onSelectView(ImageViews.SINGLE);

app/package.json

@@ -13,12 +13,13 @@
     "@types/lodash": "4.17.14",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
+    "bun-plugin-tailwind": "0.0.14",
     "lodash": "4.17.21",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-router-dom": "7.1.3",
     "trpc-bun-adapter": "1.2.2",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.5",
     "zod": "3.24.1"
   },
   "devDependencies": {
@@ -28,7 +29,7 @@
     "vite": "6.0.11"
   },
   "scripts": {
-    "dev": "NODE_ENV=development bun --hot ./server.ts",
+    "dev": "bun --hot ./server.ts",
     "start": "bun ./server.ts",
     "test": "nx docker comparadise && nx test:e2e frontend"
   }

app/public/index.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
     />
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="tailwindcss" />
   </head>
   <body>
     <div id="root"></div>

app/server.ts

@@ -15,8 +15,7 @@ const server = serve({
       trpcHandler(request, response) ??
       new Response('Not found', { status: 404 })
     );
-  },
-  development: true
+  }
 });
 
 console.log(`Server running at ${server.url}`);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comparadise",
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].2",
   "devDependencies": {
     "@swc/jest": "0.2.37",
     "@total-typescript/ts-reset": "0.6.1",