Upgrade Tailwind CSS v4

vanlalruata · vanlalruata · commit a4cbe7afa05a · 2025-04-09T11:21:39.000+05:30
The new size-* utility (added in Tailwind v3.4), is now fully supported by tailwind-merge in v4. We can replace w-* h-* with the new size-* utility.
diff --git a/composer.lock b/composer.lock
diff --git a/resources/js/components/ui/avatar/AvatarImage.vue b/resources/js/components/ui/avatar/AvatarImage.vue
@@ -5,5 +5,5 @@ const props = defineProps<AvatarImageProps>();
 </script>
 
 <template>
-    <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+    <AvatarImage v-bind="props" class="size-full object-cover" />
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -9,9 +9,9 @@ const props = defineProps<{
 </script>
 
 <template>
-    <span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
+    <span role="presentation" aria-hidden="true" :class="cn('flex size-9 items-center justify-center', props.class)">
         <slot>
-            <MoreHorizontal class="h-4 w-4" />
+            <MoreHorizontal class="size-4" />
         </slot>
         <span class="sr-only">More</span>
     </span>
diff --git a/resources/js/components/ui/checkbox/Checkbox.vue b/resources/js/components/ui/checkbox/Checkbox.vue
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       cn('peer size-5 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-accent-foreground',
          props.class)"
   >
-    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+    <CheckboxIndicator class="flex size-full items-center justify-center text-current">
       <slot>
         <Check class="size-3.5 stroke-[3]" />
       </slot>
diff --git a/resources/js/components/ui/dialog/DialogContent.vue b/resources/js/components/ui/dialog/DialogContent.vue
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             <DialogClose
                 class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
             >
-                <X class="h-4 w-4" />
+                <X class="size-4" />
                 <span class="sr-only">Close</span>
             </DialogClose>
         </DialogContent>
diff --git a/resources/js/components/ui/dialog/DialogScrollContent.vue b/resources/js/components/ui/dialog/DialogScrollContent.vue
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
                 <slot />
 
                 <DialogClose class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary">
-                    <X class="h-4 w-4" />
+                    <X class="size-4" />
                     <span class="sr-only">Close</span>
                 </DialogClose>
             </DialogContent>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -32,9 +32,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             )
         "
     >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <span class="absolute left-2 flex size-3.5 items-center justify-center">
             <DropdownMenuItemIndicator>
-                <Check class="h-4 w-4" />
+                <Check class="size-4" />
             </DropdownMenuItemIndicator>
         </span>
         <slot />
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -33,9 +33,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             )
         "
     >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <span class="absolute left-2 flex size-3.5 items-center justify-center">
             <DropdownMenuItemIndicator>
-                <Circle class="h-2 w-2 fill-current" />
+                <Circle class="size-2 fill-current" />
             </DropdownMenuItemIndicator>
         </span>
         <slot />
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -26,6 +26,6 @@ const forwardedProps = useForwardProps(delegatedProps);
         "
     >
         <slot />
-        <ChevronRight class="ml-auto h-4 w-4" />
+        <ChevronRight class="ml-auto size-4" />
     </DropdownMenuSubTrigger>
 </template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -19,6 +19,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
   >
-    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div class="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuIndicator>
 </template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <ChevronDown
-      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      class="relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/resources/js/components/ui/sheet/SheetContent.vue b/resources/js/components/ui/sheet/SheetContent.vue
@@ -46,7 +46,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             <DialogClose
                 class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
             >
-                <X class="h-4 w-4 text-muted-foreground" />
+                <X class="size-4 text-muted-foreground" />
             </DialogClose>
         </DialogContent>
     </DialogPortal>
diff --git a/resources/js/components/ui/sidebar/Sidebar.vue b/resources/js/components/ui/sidebar/Sidebar.vue
@@ -37,7 +37,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
             }"
         >
-            <div class="flex h-full w-full flex-col">
+            <div class="flex size-full flex-col">
                 <slot />
             </div>
         </SheetContent>
@@ -82,7 +82,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
         >
             <div
                 data-sidebar="sidebar"
-                class="flex h-full w-full flex-col bg-sidebar text-sidebar-foreground group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+                class="flex size-full flex-col bg-sidebar text-sidebar-foreground group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
             >
                 <slot />
             </div>
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -13,7 +13,7 @@ const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-    <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('h-7 w-7', props.class)" @click="toggleSidebar">
+    <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('size-7', props.class)" @click="toggleSidebar">
         <PanelLeft />
         <span class="sr-only">Toggle Sidebar</span>
     </Button>
diff --git a/resources/js/layouts/auth/AuthCardLayout.vue b/resources/js/layouts/auth/AuthCardLayout.vue
@@ -13,7 +13,7 @@ defineProps<{
     <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
         <div class="flex w-full max-w-md flex-col gap-6">
             <Link :href="route('home')" class="flex items-center gap-2 self-center font-medium">
-                <div class="flex h-9 w-9 items-center justify-center">
+                <div class="flex size-9 items-center justify-center">
                     <AppLogoIcon class="size-9 fill-current text-black dark:text-white" />
                 </div>
             </Link>
diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
@@ -14,7 +14,7 @@ defineProps<{
             <div class="flex flex-col gap-8">
                 <div class="flex flex-col items-center gap-4">
                     <Link :href="route('home')" class="flex flex-col items-center gap-2 font-medium">
-                        <div class="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
+                        <div class="mb-1 flex size-9 items-center justify-center rounded-md">
                             <AppLogoIcon class="size-9 fill-current text-[var(--foreground)] dark:text-white" />
                         </div>
                         <span class="sr-only">{{ title }}</span>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
@@ -48,9 +48,9 @@ import { Head, Link } from '@inertiajs/vue3';
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
+                                    class="flex size-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
                                 >
-                                    <span class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
+                                    <span class="size-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
                                 </span>
                             </span>
                             <span>
@@ -67,7 +67,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                         viewBox="0 0 10 11"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
+                                        class="size-2.5"
                                     >
                                         <path d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001" stroke="currentColor" stroke-linecap="square" />
                                     </svg>
@@ -79,9 +79,9 @@ import { Head, Link } from '@inertiajs/vue3';
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
+                                    class="flex size-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
                                 >
-                                    <span class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
+                                    <span class="size-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
                                 </span>
                             </span>
                             <span>
@@ -98,7 +98,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                         viewBox="0 0 10 11"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
+                                        class="size-2.5"
                                     >
                                         <path d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001" stroke="currentColor" stroke-linecap="square" />
                                     </svg>
diff --git a/resources/js/pages/auth/ConfirmPassword.vue b/resources/js/pages/auth/ConfirmPassword.vue
@@ -43,7 +43,7 @@ const submit = () => {
 
                 <div class="flex items-center">
                     <Button class="w-full" :disabled="form.processing">
-                        <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+                        <LoaderCircle v-if="form.processing" class="size-4 animate-spin" />
                         Confirm Password
                     </Button>
                 </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
@@ -79,7 +79,7 @@ const submit = () => {
                 </div>
 
                 <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="form.processing">
-                    <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+                    <LoaderCircle v-if="form.processing" class="size-4 animate-spin" />
                     Log in
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
@@ -69,7 +69,7 @@ const submit = () => {
                 </div>
 
                 <Button type="submit" class="mt-2 w-full" tabindex="5" :disabled="form.processing">
-                    <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+                    <LoaderCircle v-if="form.processing" class="size-4 animate-spin" />
                     Create account
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
@@ -72,7 +72,7 @@ const submit = () => {
                 </div>
 
                 <Button type="submit" class="mt-4 w-full" :disabled="form.processing">
-                    <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+                    <LoaderCircle v-if="form.processing" class="size-4 animate-spin" />
                     Reset password
                 </Button>
             </div>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
@@ -26,7 +26,7 @@ const submit = () => {
 
         <form @submit.prevent="submit" class="space-y-6 text-center">
             <Button :disabled="form.processing" variant="secondary">
-                <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+                <LoaderCircle v-if="form.processing" class="size-4 animate-spin" />
                 Resend verification email
             </Button>
 

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)`
`24`	`24`	`cn('peer size-5 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-accent-foreground',`
`25`	`25`	`props.class)"`
`26`	`26`	`>`
`27`		`- <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">`
	`27`	`+ <CheckboxIndicator class="flex size-full items-center justify-center text-current">`
`28`	`28`	`<slot>`
`29`	`29`	`<Check class="size-3.5 stroke-[3]" />`
`30`	`30`	`</slot>`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);`
`43`	`43`	`<DialogClose`
`44`	`44`	`class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"`
`45`	`45`	`>`
`46`		`- <X class="h-4 w-4" />`
	`46`	`+ <X class="size-4" />`
`47`	`47`	`<span class="sr-only">Close</span>`
`48`	`48`	`</DialogClose>`
`49`	`49`	`</DialogContent>`
Original file line number	Diff line number	Diff line change
`@@ -32,9 +32,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);`
`32`	`32`	`)`
`33`	`33`	`"`
`34`	`34`	`>`
`35`		`- <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">`
	`35`	`+ <span class="absolute left-2 flex size-3.5 items-center justify-center">`
`36`	`36`	`<DropdownMenuItemIndicator>`
`37`		`- <Check class="h-4 w-4" />`
	`37`	`+ <Check class="size-4" />`
`38`	`38`	`</DropdownMenuItemIndicator>`
`39`	`39`	`</span>`
`40`	`40`	`<slot />`
Original file line number	Diff line number	Diff line change
`@@ -33,9 +33,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);`
`33`	`33`	`)`
`34`	`34`	`"`
`35`	`35`	`>`
`36`		`- <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">`
	`36`	`+ <span class="absolute left-2 flex size-3.5 items-center justify-center">`
`37`	`37`	`<DropdownMenuItemIndicator>`
`38`		`- <Circle class="h-2 w-2 fill-current" />`
	`38`	`+ <Circle class="size-2 fill-current" />`
`39`	`39`	`</DropdownMenuItemIndicator>`
`40`	`40`	`</span>`
`41`	`41`	`<slot />`
Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,6 @@ const forwardedProps = useForwardProps(delegatedProps);`
`26`	`26`	`"`
`27`	`27`	`>`
`28`	`28`	`<slot />`
`29`		`- <ChevronRight class="ml-auto h-4 w-4" />`
	`29`	`+ <ChevronRight class="ml-auto size-4" />`
`30`	`30`	`</DropdownMenuSubTrigger>`
`31`	`31`	`</template>`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,6 @@ const forwardedProps = useForwardProps(delegatedProps)`
`19`	`19`	`v-bind="forwardedProps"`
`20`	`20`	`:class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"`
`21`	`21`	`>`
`22`		`- <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />`
	`22`	`+ <div class="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />`
`23`	`23`	`</NavigationMenuIndicator>`
`24`	`24`	`</template>`