Fix

biome.json

@@ -15,7 +15,10 @@
     "linter": {
         "enabled": true,
         "rules": {
-            "recommended": true
+            "recommended": true,
+            "nursery": {
+                "useSortedClasses": "error"
+            }
         }
     },
     "javascript": {

packages/webapp/src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "rounded-base flex flex-col shadow-shadow border-2 gap-6 py-6 border-border bg-background text-foreground font-base",
+        "flex flex-col gap-6 rounded-base border-2 border-border bg-background py-6 font-base text-foreground shadow-shadow",
         className,
       )}
       {...props}
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm font-base", className)}
+      className={cn("font-base text-sm", className)}
       {...props}
     />
   )

packages/webapp/src/routes/__root.tsx

@@ -1,6 +1,6 @@
-import { Card, CardContent } from "@/components/ui/card"
-import { Outlet, createRootRoute } from "@tanstack/react-router"
+import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
+import { Card, CardContent } from "@/components/ui/card"
 
 
 export const Route = createRootRoute({
@@ -9,7 +9,7 @@ export const Route = createRootRoute({
 
 function RootComponent() {
     return <>
-        <div className="text-foreground mx-auto w-[750px] max-w-full px-5 pt-28 pb-10">
+        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
             <Card>
                 <CardContent>
                     <Outlet />