refactor(*): migrate deprecated Tailwind v3 utility classes to v4

src/components/BlogAuthorFilter.tsx

@@ -47,7 +47,7 @@ export function BlogAuthorFilter({
           >
             <span
               className={twMerge(
-                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden flex-shrink-0',
+                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden shrink-0',
                 activeAuthor ? 'border-blue-500/30' : 'border-gray-500/20',
               )}
             >
@@ -114,7 +114,7 @@ export function BlogAuthorFilter({
                   width={20}
                   src={getAuthorAvatar(name)}
                   alt=""
-                  className="w-5 h-5 rounded object-cover flex-shrink-0"
+                  className="w-5 h-5 rounded object-cover shrink-0"
                 />
                 <span className="truncate">{name}</span>
                 {isSelected ? (

src/components/CopyPageDropdown.tsx

@@ -331,7 +331,7 @@ export function CopyPageDropdown({
               onSelect={item.onSelect}
               className="gap-3 px-3 py-2.5"
             >
-              <div className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-gray-700 dark:text-gray-400">
+              <div className="shrink-0 w-5 h-5 flex items-center justify-center text-gray-700 dark:text-gray-400">
                 <item.icon className="w-4 h-4" />
               </div>
               <div className="flex flex-col gap-0.5">

src/components/DocFeedbackNote.tsx

@@ -370,14 +370,14 @@ export function DocFeedbackNote({
         >
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2 flex-1 min-w-0">
-              <Icon className={`${colors.icon} text-xs flex-shrink-0`} />
+              <Icon className={`${colors.icon} text-xs shrink-0`} />
               <span className={`text-xs font-medium ${colors.text} truncate`}>
                 {isImprovement ? 'Your Improvement' : 'Your Note'}
               </span>
               {isImprovement && note.status && (
                 <span
                   className={twMerge(
-                    'text-[10px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide flex-shrink-0',
+                    'text-[10px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide shrink-0',
                     note.status === 'approved' &&
                       'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
                     note.status === 'denied' &&
@@ -390,7 +390,7 @@ export function DocFeedbackNote({
                 </span>
               )}
             </div>
-            <div className="flex items-center gap-1 flex-shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
               {!note.isCollapsed && (
                 <>
                   <button

src/components/DocFeedbackProvider.tsx

@@ -728,7 +728,7 @@ function CreatingFeedbackNote({
             <React.Suspense
               fallback={<div className={`${colors.icon} text-xs`}>...</div>}
             >
-              <Icon className={`${colors.icon} text-xs flex-shrink-0`} />
+              <Icon className={`${colors.icon} text-xs shrink-0`} />
             </React.Suspense>
             <span className={`text-xs font-medium ${colors.text}`}>
               {isImprovement ? 'New Improvement' : 'New Note'}

src/components/FeedbackLeaderboard.tsx

@@ -136,7 +136,7 @@ export function FeedbackLeaderboard() {
                         key={entry.userId}
                         className={twMerge(
                           rank <= 3 && page === 1
-                            ? 'bg-gradient-to-r from-yellow-50 to-transparent dark:from-yellow-900/10'
+                            ? 'bg-linear-to-r from-yellow-50 to-transparent dark:from-yellow-900/10'
                             : '',
                         )}
                       >
@@ -179,7 +179,7 @@ export function FeedbackLeaderboard() {
                 </TableBody>
               </Table>
 
-              <div className="p-3 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700">
+              <div className="p-3 bg-linear-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700">
                 <PaginationControls
                   currentPage={page - 1}
                   totalPages={pagination.totalPages}

src/components/FilterComponents.tsx

@@ -628,7 +628,7 @@ export function ViewModeToggle({
 
   if (compact) {
     return (
-      <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5 flex-shrink-0">
+      <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5 shrink-0">
         {compactViewModes.map(({ mode, icon: Icon, title }) => (
           <button
             key={mode}

src/components/FrameworkCard.tsx

@@ -69,7 +69,7 @@ export function FrameworkCard({
         className="flex flex-col flex-1 gap-4"
       >
         {/* Framework Logo */}
-        <div className="flex-shrink-0 flex justify-center">
+        <div className="shrink-0 flex justify-center">
           <img
             src={framework.logo}
             alt={framework.label}
@@ -98,7 +98,7 @@ export function FrameworkCard({
               e.stopPropagation()
               onCopyClick(e)
             }}
-            className="flex-shrink-0 p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="shrink-0 p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded hover:bg-gray-100 dark:hover:bg-gray-800"
             title="Copy package name"
           >
             {copied ? (

src/components/LibraryCard.tsx

@@ -164,7 +164,7 @@ export default function LibraryCard({
         <div
           className={twMerge(
             `absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md`,
-            ['bg-gradient-to-r', library.colorFrom, library.colorTo],
+            ['bg-linear-to-r', library.colorFrom, library.colorTo],
             'uppercase font-black italic text-xs',
             library.badgeTextStyle ?? 'text-white',
           )}

src/components/LibraryTestimonials.tsx

@@ -51,7 +51,7 @@ export function LibraryTestimonials({
 
 function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
   return (
-    <Card className="flex-shrink-0 w-72 md:w-80 p-5">
+    <Card className="shrink-0 w-72 md:w-80 p-5">
       <div className="flex items-start gap-1 mb-3">
         {[...Array(5)].map((_, j) => (
           <Star

src/components/Navbar.tsx

@@ -579,7 +579,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <div className="flex min-w-0 flex-1 items-center gap-2 min-[1120px]:gap-3">
         <div className="flex items-center gap-2 font-black text-xl uppercase min-w-0">
           <BrandContextMenu
-            className={twMerge(`flex items-center group flex-shrink-0`)}
+            className={twMerge(`flex items-center group shrink-0`)}
           >
             <LogoSection title={Title} />
           </BrandContextMenu>

src/components/PartnersGrid.tsx

@@ -153,7 +153,7 @@ export function PartnersGrid({
         return (
           <Card
             key={row.tier}
-            className={`overflow-hidden rounded-none rounded-l-sm rounded-r-2xl bg-gradient-to-b ${flare.gradientStops}`}
+            className={`overflow-hidden rounded-none rounded-l-sm rounded-r-2xl bg-linear-to-b ${flare.gradientStops}`}
           >
             <div className="ml-1.5 bg-white dark:bg-gray-900">
               <div className="px-4 pt-3 pb-2 border-b border-gray-200 dark:border-gray-800 flex items-center gap-2">

src/components/PlaceholderSponsorPack.tsx

@@ -15,7 +15,7 @@ function createBubbleStyle(index: number) {
 
 export default function PlaceholderSponsorPack() {
   return (
-    <div className="relative w-full h-full overflow-hidden rounded-[2rem] bg-gradient-to-br from-gray-100/80 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
+    <div className="relative w-full h-full overflow-hidden rounded-[2rem] bg-linear-to-br from-gray-100/80 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
       {Array.from({ length: 48 }).map((_, index) => {
         const style = createBubbleStyle(index)
 

src/components/RightRail.tsx

@@ -170,7 +170,7 @@ export function PartnersRail({
           >
             {/* Tier-colored top line */}
             <div
-              className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${flare.gradientStops}`}
+              className={`absolute top-0 left-0 right-0 h-1 bg-linear-to-r ${flare.gradientStops}`}
             />
             {/* Absolute top-left tier label */}
             <div

src/components/Select.tsx

@@ -87,7 +87,7 @@ export function Select<T extends SelectOption>({
                   width={18}
                   src={option.logo}
                   alt={`${option.label} logo`}
-                  className="flex-shrink-0"
+                  className="shrink-0"
                 />
               ) : null}
               <span className="truncate">{option.label}</span>

src/components/ShowcaseGallery.tsx

@@ -295,7 +295,7 @@ export function ShowcaseGallery() {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950">
+      <div className="bg-linear-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950">
         <div className="max-w-7xl mx-auto px-4 py-12 sm:py-16">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div>

src/components/UserFeedbackSection.tsx

@@ -34,7 +34,7 @@ export function UserFeedbackSection(_props: UserFeedbackSectionProps) {
   return (
     <div className="space-y-6">
       {/* Points Summary Box */}
-      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
+      <div className="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">

src/components/game/IslandExplorer.client.tsx

@@ -46,7 +46,7 @@ function LoadingOverlay() {
   const [headline, subtext] = LOADING_MESSAGES[messageIndex]
 
   return (
-    <div className="absolute inset-0 bg-gradient-to-b from-sky-400 to-cyan-600 flex items-center justify-center z-50">
+    <div className="absolute inset-0 bg-linear-to-b from-sky-400 to-cyan-600 flex items-center justify-center z-50">
       <div className="text-center">
         <div className="w-16 h-16 mx-auto mb-4 border-4 border-white/30 border-t-white rounded-full animate-spin" />
         <p className="text-white text-lg font-medium">{headline}</p>

src/components/game/ui/CompleteOverlay.tsx

@@ -13,7 +13,7 @@ export function CompleteOverlay() {
   }
 
   return (
-    <div className="absolute inset-0 z-20 flex items-center justify-center bg-gradient-to-b from-amber-400/90 to-orange-500/90 backdrop-blur-sm">
+    <div className="absolute inset-0 z-20 flex items-center justify-center bg-linear-to-b from-amber-400/90 to-orange-500/90 backdrop-blur-sm">
       <div className="max-w-md mx-4 text-center">
         {/* Trophy */}
         <div className="w-24 h-24 mx-auto mb-6 bg-white/20 rounded-full flex items-center justify-center">

src/components/game/ui/GameHUD.tsx

@@ -197,7 +197,7 @@ export function GameHUD() {
             </span>
             <div className="w-32 h-3 bg-black/50 rounded-full overflow-hidden max-md:w-20 max-md:h-2">
               <div
-                className="h-full bg-gradient-to-r from-red-600 to-red-400"
+                className="h-full bg-linear-to-r from-red-600 to-red-400"
                 style={{
                   width: `${(boatHealth / totalMaxHealth) * 100}%`,
                 }}
@@ -217,8 +217,8 @@ export function GameHUD() {
               <div
                 className={`h-full transition-all duration-75 ${
                   cooldownProgress >= 1
-                    ? 'bg-gradient-to-r from-cyan-500 to-cyan-300'
-                    : 'bg-gradient-to-r from-cyan-800 to-cyan-600'
+                    ? 'bg-linear-to-r from-cyan-500 to-cyan-300'
+                    : 'bg-linear-to-r from-cyan-800 to-cyan-600'
                 }`}
                 style={{ width: `${cooldownProgress * 100}%` }}
               />
@@ -233,7 +233,7 @@ export function GameHUD() {
       {/* Upgrade notification */}
       {showUpgradeNotification && upgradeInfo && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-yellow-500/90 to-amber-600/90 backdrop-blur-md rounded-2xl px-8 py-5 text-center shadow-2xl border border-yellow-300/30">
+          <div className="bg-linear-to-br from-yellow-500/90 to-amber-600/90 backdrop-blur-md rounded-2xl px-8 py-5 text-center shadow-2xl border border-yellow-300/30">
             <div className="text-4xl mb-2">{upgradeInfo.icon}</div>
             <div className="text-white font-bold text-xl mb-1">
               {upgradeInfo.name}
@@ -248,7 +248,7 @@ export function GameHUD() {
       {/* Showcase unlock notification */}
       {showShowcaseUnlock && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-purple-500/90 to-violet-600/90 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-purple-300/30 max-w-sm">
+          <div className="bg-linear-to-br from-purple-500/90 to-violet-600/90 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-purple-300/30 max-w-sm">
             <div className="text-5xl mb-3">🏝️</div>
             <div className="text-white font-bold text-xl mb-2">
               Showcase Islands Unlocked!
@@ -270,7 +270,7 @@ export function GameHUD() {
       {/* Corners unlock notification */}
       {showCornersUnlock && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-gray-900/95 to-red-950/95 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-red-500/30 max-w-sm">
+          <div className="bg-linear-to-br from-gray-900/95 to-red-950/95 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-red-500/30 max-w-sm">
             <div className="text-5xl mb-3">💀</div>
             <div className="text-red-400 font-bold text-xl mb-2">
               The Four Corners Await

src/components/game/ui/GameOverOverlay.tsx

@@ -69,7 +69,7 @@ export function GameOverOverlay() {
               transform: animationStep >= 1 ? 'scale(1)' : 'scale(0.5)',
             }}
           >
-            <div className="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center shadow-lg">
+            <div className="w-20 h-20 mx-auto rounded-full bg-linear-to-br from-red-500 to-red-700 flex items-center justify-center shadow-lg">
               <span className="text-4xl">💀</span>
             </div>
           </div>

src/components/stack/CategoryArticle.tsx

@@ -974,7 +974,7 @@ function RelatedPostsBlock({ items }: { items: Array<RelatedPost> }) {
                 <div className="flex flex-wrap items-center gap-2">
                   <span
                     className={twMerge(
-                      'inline-flex rounded-md bg-gradient-to-r px-2 py-1 text-xs font-black text-white',
+                      'inline-flex rounded-md bg-linear-to-r px-2 py-1 text-xs font-black text-white',
                       lib.colorFrom,
                       lib.colorTo,
                     )}
@@ -1080,7 +1080,7 @@ function LibraryTitle({
         {library.badge ? (
           <span
             className={twMerge(
-              'rounded-md bg-gradient-to-r px-1.5 py-0.5 text-xs font-black uppercase',
+              'rounded-md bg-linear-to-r px-1.5 py-0.5 text-xs font-black uppercase',
               library.colorFrom,
               library.colorTo,
               library.badgeTextStyle ?? 'text-white',

src/routes/account/feedback.tsx

@@ -50,7 +50,7 @@ function AccountFeedbackPage() {
   return (
     <div className="space-y-6">
       {/* Points Summary Box */}
-      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
+      <div className="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">

src/routes/account/integrations.tsx

@@ -178,7 +178,7 @@ function IntegrationsPage() {
       {newlyCreatedKey && (
         <Card className="p-4 border-green-500 dark:border-green-600 bg-green-50 dark:bg-green-950/30">
           <div className="flex items-start gap-3">
-            <Key className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+            <Key className="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
             <div className="flex-1 min-w-0">
               <p className="font-medium text-green-800 dark:text-green-200 text-sm">
                 Your new API key
@@ -190,7 +190,7 @@ function IntegrationsPage() {
                 <code className="flex-1 bg-white dark:bg-gray-900 border border-green-200 dark:border-green-800 rounded px-3 py-2 text-sm font-mono text-gray-900 dark:text-gray-100 overflow-x-auto">
                   {newlyCreatedKey}
                 </code>
-                <Button onClick={handleCopy} className="flex-shrink-0">
+                <Button onClick={handleCopy} className="shrink-0">
                   {copied.active ? (
                     <Check className="w-3.5 h-3.5 text-green-600" />
                   ) : (
@@ -345,7 +345,7 @@ function IntegrationsPage() {
                   </div>
                 </div>
               </div>
-              <div className="flex items-center gap-2 flex-shrink-0">
+              <div className="flex items-center gap-2 shrink-0">
                 {key.isActive && (
                   <Button
                     onClick={() =>
@@ -426,7 +426,7 @@ function IntegrationsPage() {
                   </div>
                 </div>
               </div>
-              <div className="flex items-center gap-2 flex-shrink-0">
+              <div className="flex items-center gap-2 shrink-0">
                 <Button
                   onClick={() =>
                     revokeAppMutation.mutate({