feat(upgrade): Upgraded tailwind v4 (#209)

* feat(upgrade): Upgraded tailwind v4

* feat(upgrade): deps and shadcn

Author: sajanv88

src/package.json

@@ -17,33 +17,33 @@
     "@hey-api/client-fetch": "^0.10.0",
     "@hey-api/openapi-ts": "^0.66.5",
     "@hookform/resolvers": "^5.0.1",
-    "@radix-ui/react-accordion": "^1.2.7",
-    "@radix-ui/react-alert-dialog": "^1.1.10",
-    "@radix-ui/react-aspect-ratio": "^1.1.4",
-    "@radix-ui/react-avatar": "^1.1.6",
-    "@radix-ui/react-checkbox": "^1.2.2",
-    "@radix-ui/react-collapsible": "^1.1.7",
-    "@radix-ui/react-context-menu": "^2.2.11",
-    "@radix-ui/react-dialog": "^1.1.10",
-    "@radix-ui/react-dropdown-menu": "^2.1.11",
-    "@radix-ui/react-hover-card": "^1.1.10",
-    "@radix-ui/react-label": "^2.1.4",
-    "@radix-ui/react-menubar": "^1.1.11",
-    "@radix-ui/react-navigation-menu": "^1.2.9",
-    "@radix-ui/react-popover": "^1.1.10",
-    "@radix-ui/react-progress": "^1.1.4",
-    "@radix-ui/react-radio-group": "^1.3.3",
-    "@radix-ui/react-scroll-area": "^1.2.5",
-    "@radix-ui/react-select": "^2.2.2",
-    "@radix-ui/react-separator": "^1.1.4",
-    "@radix-ui/react-slider": "^1.3.2",
-    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-switch": "^1.2.2",
-    "@radix-ui/react-tabs": "^1.1.8",
-    "@radix-ui/react-toast": "^1.2.10",
-    "@radix-ui/react-toggle": "^1.1.6",
-    "@radix-ui/react-toggle-group": "^1.1.7",
-    "@radix-ui/react-tooltip": "^1.2.3",
+    "@radix-ui/react-accordion": "^1.2.10",
+    "@radix-ui/react-alert-dialog": "^1.1.13",
+    "@radix-ui/react-aspect-ratio": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-context-menu": "^2.2.14",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-hover-card": "^1.1.13",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-menubar": "^1.1.14",
+    "@radix-ui/react-navigation-menu": "^1.2.12",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-progress": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-separator": "^1.1.6",
+    "@radix-ui/react-slider": "^1.3.4",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-switch": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-toast": "^1.2.13",
+    "@radix-ui/react-toggle": "^1.1.8",
+    "@radix-ui/react-toggle-group": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.6",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
@@ -55,26 +55,28 @@
     "ioredis": "^5.6.1",
     "iron-session": "^8.0.4",
     "jwt-decode": "^4.0.0",
-    "lucide-react": "^0.501.0",
+    "lucide-react": "^0.511.0",
     "next": "15.3.1",
     "next-themes": "^0.4.6",
     "openid-client": "^6.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "react": "^19.1.0",
-    "react-day-picker": "^9.6.7",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.0",
     "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.3",
     "sharp": "^0.34.1",
     "sonner": "^2.0.3",
-    "tailwind-merge": "^3.2.0",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwind-merge": "^3.3.0",
+    "tw-animate-css": "^1.3.0",
     "uuid": "^11.1.0",
     "vaul": "^1.1.2",
     "zod": "^3.24.3"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.1",
+    "@tailwindcss/postcss": "^4.1.7",
     "@tanstack/eslint-plugin-query": "^5.73.3",
     "@types/node": "^22.14.1",
     "@types/react": "^19.1.2",
@@ -91,7 +93,7 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "release-it": "^19.0.1",
     "release-it-changelogen": "^0.1.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.7",
     "typescript": "^5.8.3"
   },
   "lint-staged": {

src/pnpm-lock.yaml

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 }
 

src/postcss.config.mjs

@@ -1,6 +1,93 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans:
+    var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  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);
+  }
+}
 
 @layer base {
   :root {
@@ -48,3 +135,85 @@
     --ring: 224.3 76.3% 48%;
   }
 }
+
+/*
+  ---break---
+*/
+
+:root {
+  --sidebar:
+    hsl(0 0% 98%);
+  --sidebar-foreground:
+    hsl(240 5.3% 26.1%);
+  --sidebar-primary:
+    hsl(240 5.9% 10%);
+  --sidebar-primary-foreground:
+    hsl(0 0% 98%);
+  --sidebar-accent:
+    hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground:
+    hsl(240 5.9% 10%);
+  --sidebar-border:
+    hsl(220 13% 91%);
+  --sidebar-ring:
+    hsl(217.2 91.2% 59.8%);
+}
+
+/*
+  ---break---
+*/
+
+.dark {
+  --sidebar:
+    hsl(240 5.9% 10%);
+  --sidebar-foreground:
+    hsl(240 4.8% 95.9%);
+  --sidebar-primary:
+    hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground:
+    hsl(0 0% 100%);
+  --sidebar-accent:
+    hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground:
+    hsl(240 4.8% 95.9%);
+  --sidebar-border:
+    hsl(240 3.7% 15.9%);
+  --sidebar-ring:
+    hsl(217.2 91.2% 59.8%);
+}
+
+/*
+  ---break---
+*/
+
+@theme inline {
+  --color-sidebar:
+    var(--sidebar);
+  --color-sidebar-foreground:
+    var(--sidebar-foreground);
+  --color-sidebar-primary:
+    var(--sidebar-primary);
+  --color-sidebar-primary-foreground:
+    var(--sidebar-primary-foreground);
+  --color-sidebar-accent:
+    var(--sidebar-accent);
+  --color-sidebar-accent-foreground:
+    var(--sidebar-accent-foreground);
+  --color-sidebar-border:
+    var(--sidebar-border);
+  --color-sidebar-ring:
+    var(--sidebar-ring);
+}
+
+/*
+  ---break---
+*/
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/src/app/globals.css

@@ -10,7 +10,7 @@ const Login = () => {
   if (data?.isLoggedIn) {
     return (
       <button
-        className="inline-flex h-10 items-center justify-center rounded-md bg-blue-600 px-6 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400"
+        className="inline-flex h-10 items-center justify-center rounded-md bg-blue-600 px-6 text-sm font-medium text-white shadow-xs transition-colors hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400"
         onClick={() => {
           window.location.href = '/auth/logout'
         }}
@@ -22,7 +22,7 @@ const Login = () => {
 
   return (
     <button
-      className="inline-flex h-10 items-center justify-center rounded-md bg-blue-600 px-6 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400"
+      className="inline-flex h-10 items-center justify-center rounded-md bg-blue-600 px-6 text-sm font-medium text-white shadow-xs transition-colors hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400"
       onClick={() => {
         window.location.href = '/auth/login'
       }}

src/src/components/Login.tsx

@@ -131,7 +131,7 @@ export const FeatureList = ({ onDismiss, tenantId }: FeatureListProps) => {
             <DialogTitle>Features</DialogTitle>
           </DialogHeader>
           <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="grid grid-cols-1 items-baseline gap-2 sm:grid-cols-[12rem_minmax(10rem,_1fr)_auto]">
+            <div className="grid grid-cols-1 items-baseline gap-2 sm:grid-cols-[12rem_minmax(10rem,1fr)_auto]">
               <div className="p-3">
                 {data?.groups?.map((el: FeatureGroupDto) => (
                   <span key={v4()}>{el.displayName}</span>

src/src/components/tenant/FeatureList.tsx

@@ -68,7 +68,7 @@ const TableView = <T extends unknown>({ table, totalCount, pageSize }: TableView
         </table>
       </section>
       <div className="flex flex-col border-t p-5 lg:flex-row lg:items-center">
-        <div className="text-base-content flex-grow pb-2">{totalCount} total</div>
+        <div className="text-base-content grow pb-2">{totalCount} total</div>
         {totalCount > 10 && <Pagination<T> pageCount={pageCount} table={table} />}
       </div>
     </section>

src/src/components/ui/CustomTable.tsx

@@ -1,7 +1,7 @@
 import { Loader2 } from 'lucide-react'
 const Loader = () => {
   return (
-    <div className="z-50 flex min-h-[20rem] w-full items-center justify-center">
+    <div className="z-50 flex min-h-80 w-full items-center justify-center">
       <Loader2 width={24} height={24} className="animate-spin" />
     </div>
   )