upgrade to tailwind 3.4 with new utility classes

Signed-off-by: Vu Van Dung <me@joulev.dev>

package.json

@@ -80,7 +80,7 @@
     "sharp": "0.32.6",
     "shikiji": "0.9.9",
     "tailwind-merge": "2.1.0",
-    "tailwindcss": "3.3.6",
+    "tailwindcss": "3.4.0",
     "tailwindcss-animate": "1.0.7",
     "typescript": "5.3.3",
     "valibot": "0.24.1",

src/app/(public)/(home)/github-stats.tsx

@@ -62,9 +62,9 @@ function BackgroundPattern() {
     .fill(null)
     .map(_ => colours[Math.floor(seededRandom() * colours.length)]);
   return (
-    <div className="grid-rows-7 absolute -left-6 -top-6 -z-10 grid grid-cols-7 gap-1">
+    <div className="absolute -left-6 -top-6 -z-10 grid grid-cols-7 grid-rows-7 gap-1">
       {days.map((c, i) => (
-        <div key={i} className="h-3 w-3 rounded-[0.2rem]" style={{ background: c }} />
+        <div key={i} className="size-3 rounded-[0.2rem]" style={{ background: c }} />
       ))}
     </div>
   );
@@ -86,7 +86,7 @@ export async function GitHubStats() {
       left={
         <>
           <BackgroundPattern />
-          <div className="h-18 w-18 shrink-0" />
+          <div className="size-18 shrink-0" />
         </>
       }
       right={

src/app/(public)/(home)/metadata-card.tsx

@@ -26,7 +26,7 @@ export function MetadataCard({
             variants={{ variant: "ghost", size: "icon-sm" }}
             className="-m-1.5 text-text-secondary hover:text-text-primary"
           >
-            <Icon className="h-4 w-4" />
+            <Icon className="size-4" />
           </LinkButton>
         </div>
         {right}

src/app/(public)/(home)/music-data.tsx

@@ -17,11 +17,7 @@ export async function MusicData() {
     <MetadataCard
       left={
         // eslint-disable-next-line @next/next/no-img-element -- lh3.googleusercontent.com is too large for us to allow
-        <img
-          src={thumbnail?.url}
-          alt={song.name}
-          className="h-18 w-18 rounded-[0.5rem] opacity-80"
-        />
+        <img src={thumbnail?.url} alt={song.name} className="size-18 rounded-[0.5rem] opacity-80" />
       }
       right={
         <>

src/app/(public)/apps/anime/[[...status]]/card.tsx

@@ -61,7 +61,7 @@ export function Card({ item, variant }: { item: AnimeListItem; variant: AnimeCar
             <BottomPart item={item} variant={variant} />
           </div>
           {item.media?.coverImage?.medium ? (
-            <div className="relative hidden min-h-[64px] w-12 shrink-0 overflow-clip rounded-[0.5rem] sm:block">
+            <div className="relative hidden min-h-16 w-12 shrink-0 overflow-clip rounded-[0.5rem] sm:block">
               <Image
                 src={item.media.coverImage.medium}
                 alt="cover"
@@ -71,7 +71,7 @@ export function Card({ item, variant }: { item: AnimeListItem; variant: AnimeCar
               />
             </div>
           ) : (
-            <div className="bg-daw-main-200 hidden min-h-[96px] w-18 shrink-0 rounded sm:block" />
+            <div className="bg-daw-main-200 hidden min-h-24 w-18 shrink-0 rounded sm:block" />
           )}
         </div>
       </Link>

src/app/(public)/apps/irasuto/layout.tsx

@@ -23,7 +23,7 @@ function CreditDialog() {
           転載について <span className="text-xs">(ja)</span>
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[600px]">
+      <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-2xl">
         <DialogHeader>
           <DialogTitle>絵の転載について</DialogTitle>
         </DialogHeader>

src/app/(public)/apps/tategaki/page.client.tsx

@@ -34,7 +34,7 @@ function Furigana({ furigana }: { furigana: string }) {
 function Character({ character: { char, furigana, count } }: { character: Type.Character }) {
   return (
     <span
-      className="relative mr-6 grid h-6 w-6 place-items-center animate-in fade-in slide-in-from-top-1 fill-mode-both"
+      className="relative mr-6 grid size-6 place-items-center animate-in fade-in slide-in-from-top-1 fill-mode-both"
       style={{ animationDelay: `${count * 3}ms` }}
     >
       {char[0]}

src/app/(public)/blogs/(posts)/handling-svg-icon-path-opacity-overlap/components.tsx

@@ -13,7 +13,7 @@ export function Problem() {
       <div className="grid grid-cols-2 divide-x divide-separator">
         <div className="flex flex-col items-center gap-3 pr-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -45,7 +45,7 @@ export function Problem() {
         </div>
         <div className="flex flex-col items-center gap-3 pl-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -100,7 +100,7 @@ export function FlaskConicalFlattening() {
       <div className="grid grid-cols-2 divide-x divide-separator">
         <div className="flex flex-col items-center gap-3 pr-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -130,7 +130,7 @@ export function FlaskConicalFlattening() {
         </div>
         <div className="flex flex-col items-center gap-3 pl-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -170,7 +170,7 @@ export function AtomReallyFlattening() {
       <div className="grid grid-cols-2 divide-x divide-separator">
         <div className="flex flex-col items-center gap-3 pr-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -203,7 +203,7 @@ export function AtomReallyFlattening() {
         </div>
         <div className="flex flex-col items-center gap-3 pl-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -253,7 +253,7 @@ export function AtomMask() {
       <div className="grid grid-cols-2 divide-x divide-separator">
         <div className="flex flex-col items-center gap-3 pr-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -283,7 +283,7 @@ export function AtomMask() {
         </div>
         <div className="flex flex-col items-center gap-3 pl-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -333,7 +333,7 @@ export function AtomMaskCustomiseStrokeWidth() {
       <div className="grid grid-cols-2 divide-x divide-separator">
         <div className="flex flex-col items-center gap-3 pr-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -360,7 +360,7 @@ export function AtomMaskCustomiseStrokeWidth() {
         </div>
         <div className="flex flex-col items-center gap-3 pl-6">
           <svg
-            className="h-24 w-24"
+            className="size-24"
             width="24"
             height="24"
             viewBox="0 0 24 24"

src/app/(public)/blogs/(posts)/layout.tsx

@@ -37,7 +37,7 @@ export default function Layout({ children }: LayoutProps) {
           </div>
         </div>
         <div className="flex flex-col divide-y divide-separator blog-lg:flex-row blog-lg:divide-x blog-lg:divide-y-0">
-          <article className="prose max-w-none px-[--p] py-12 [--p:24px] blog-lg:[--p:48px] [&>*]:mx-auto [&>*]:max-w-prose">
+          <article className="prose max-w-none px-[--p] py-12 [--p:24px] *:mx-auto *:max-w-prose blog-lg:[--p:48px]">
             {children}
             <div className="not-prose">
               <LinkButton href="/blogs" className="mt-6 text-text-primary no-underline">

src/app/(public)/glui/page.tsx

@@ -514,7 +514,7 @@ function DialogShowcase() {
         <DialogTrigger asChild>
           <Button>About Lipsum</Button>
         </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
+        <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Lipsum</DialogTitle>
             <DialogDescription>

src/app/(public)/layout.tsx

@@ -79,7 +79,7 @@ function Navigation() {
     <div className="fixed left-1/2 top-12 -translate-x-1/2">
       <NavigationMenu>
         <NavigationMenuList>
-          <NavigationMenuItem className="grid h-10 w-10 place-items-center rounded-full">
+          <NavigationMenuItem className="grid size-10 place-items-center rounded-full">
             <Link href="/" className="group/logo-link" unstyled>
               <Logo
                 logoWidth={18}

src/app/admin/layout.tsx

@@ -64,7 +64,7 @@ function Navigation() {
     <div className="fixed left-1/2 top-12 -translate-x-1/2">
       <NavigationMenu>
         <NavigationMenuList>
-          <NavigationMenuItem className="grid h-10 w-10 place-items-center rounded-full">
+          <NavigationMenuItem className="grid size-10 place-items-center rounded-full">
             <Link href="/" className="group/logo-link" unstyled>
               <Logo
                 logoWidth={18}

src/app/admin/manage/anime/[[...status]]/card.tsx

@@ -72,7 +72,7 @@ function UpdateItemScore({ item }: { item: AnimeListItem }) {
           <Pencil />
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>{getTitle(item.media?.title)}</DialogTitle>
           <DialogDescription>Update component scores of this anime</DialogDescription>

src/app/admin/manage/link/link-update-modal.tsx

@@ -30,7 +30,7 @@ export function LinkUpdateModal({
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>{link?.slug ?? "Create a new link"}</DialogTitle>
           <DialogDescription>Manage the URL of this short link.</DialogDescription>

src/app/background.tsx

@@ -10,7 +10,7 @@ function getBackgroundCSS(hex: string) {
 function ColouredBackground({ colours }: { colours: string[] }) {
   return (
     <div
-      className="fixed left-1/2 top-1/2 -z-50 min-h-[100lvh] min-w-full origin-center -translate-x-1/2 -translate-y-1/2 overflow-hidden"
+      className="fixed left-1/2 top-1/2 -z-50 min-h-lvh min-w-full origin-center -translate-x-1/2 -translate-y-1/2 overflow-hidden"
       style={{ aspectRatio: `${W} / ${H}` }}
     >
       <div

src/app/layout.tsx

@@ -35,7 +35,7 @@ function VersionFooter() {
   return (
     <footer className="px-6 pb-12 text-center text-xs text-text-tertiary">
       <Link unstyled href={url} className="transition hover:text-text-secondary">
-        <GitHub className="inline h-3 w-3" /> joulev/website@
+        <GitHub className="inline size-3" /> joulev/website@
         <span className="font-mono">{label}</span>
       </Link>
     </footer>

src/app/p/[slug]/page.tsx

@@ -26,9 +26,9 @@ export default async function Page({ params }: PageProps) {
         <div className="flex flex-row items-center justify-between px-6 py-4 font-mono text-sm">
           <div className="flex flex-row items-center gap-6">
             <div className="flex flex-row gap-2">
-              <div className="h-3 w-3 rounded-full bg-text-tertiary" />
-              <div className="h-3 w-3 rounded-full bg-text-tertiary" />
-              <div className="h-3 w-3 rounded-full bg-text-tertiary" />
+              <div className="size-3 rounded-full bg-text-tertiary" />
+              <div className="size-3 rounded-full bg-text-tertiary" />
+              <div className="size-3 rounded-full bg-text-tertiary" />
             </div>
             <div className="flex cursor-default select-none flex-row text-text-secondary max-sm:hidden">
               <div className="mr-3 border-r border-separator pr-3">{snippet.slug}</div>

src/components/ui/button.tsx

@@ -17,12 +17,12 @@ export const buttonVariants = cva({
       ghost: "bg-transparent text-text-primary hover:bg-bg-hover active:bg-bg-active",
     },
     size: {
-      sm: "w-fit px-3 py-1 text-sm [--button-gap:0.25rem] [&_svg]:h-4 [&_svg]:w-4",
-      md: "w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:h-6 [&_svg]:w-6",
-      lg: "w-fit px-5 py-2.5 text-lg [--button-gap:0.75rem] [&_svg]:h-7 [&_svg]:w-7",
-      "icon-sm": "h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:h-4 [&_svg]:w-4",
-      "icon-md": "h-[42px] w-[42px] p-2 [--button-gap:0.5rem] [&_svg]:h-6 [&_svg]:w-6",
-      "icon-lg": "h-[50px] w-[50px] p-2.5 [--button-gap:0.75rem] [&_svg]:h-7 [&_svg]:w-7",
+      sm: "w-fit px-3 py-1 text-sm [--button-gap:0.25rem] [&_svg]:size-4",
+      md: "w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6",
+      lg: "w-fit px-5 py-2.5 text-lg [--button-gap:0.75rem] [&_svg]:size-7",
+      "icon-sm": "h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4",
+      "icon-md": "h-[42px] w-[42px] p-2 [--button-gap:0.5rem] [&_svg]:size-6",
+      "icon-lg": "h-[50px] w-[50px] p-2.5 [--button-gap:0.75rem] [&_svg]:size-7",
     },
   },
   defaultVariants: {