Added Prettier for TailwindCSS.

src/components/Rooms/room-booking.tsx

@@ -97,7 +97,7 @@ function RoomBooking({
   const isError = isErrorCategory || isErrorPrices;
 
   if (isLoading) {
-    return <Skeleton className="w-[600px] h-[150px] mx-auto" />;
+    return <Skeleton className="mx-auto h-[150px] w-[600px]" />;
   }
 
   if (isError) {
@@ -146,7 +146,7 @@ function RoomBooking({
           </TableRow>
         </TableHeader>
         <TableBody>
-          {isLoadingPrices ? <Skeleton className="w-full h-full" /> : tableRows}
+          {isLoadingPrices ? <Skeleton className="h-full w-full" /> : tableRows}
         </TableBody>
       </Table>
     );
@@ -166,8 +166,8 @@ function RoomBooking({
   return (
     <div className="relative sm:grid sm:grid-cols-40/60">
       {roomCard}
-      <Card className="relative w-[95%] sm:w-full sm:h-4/5 self-center mx-auto sm:mx-0 rounded-b-xl rounded-none sm:rounded-e-xl -translate-y-2 sm:-translate-x-2 sm:translate-y-0">
-        <CardContent className="p-5 w-full h-full flex flex-col justify-center gap-4">
+      <Card className="relative mx-auto w-[95%] -translate-y-2 self-center rounded-none rounded-b-xl sm:mx-0 sm:h-4/5 sm:w-full sm:-translate-x-2 sm:translate-y-0 sm:rounded-e-xl">
+        <CardContent className="flex h-full w-full flex-col justify-center gap-4 p-5">
           {hasPrices ? (
             priceTable
           ) : (

src/components/Rooms/room-item-card.tsx

@@ -43,16 +43,16 @@ export function RoomItemCard({
     <Card id={room.id.toString()} className={cn(className, "relative")}>
       {/* <CardHeader className="p-0 m-0 mb-5">
         </CardHeader> */}
-      <CardContent className="flex flex-col h-full w-full p-0">
+      <CardContent className="flex h-full w-full flex-col p-0">
         <div className="">
           <img
             src={mainPhoto?.path ?? roomImg}
-            className="rounded-t-md w-full aspect-[4/3] object-cover"
+            className="aspect-[4/3] w-full rounded-t-md object-cover"
           ></img>
           <Separator className="my-0 border-2" />
         </div>
         <div>
-          <Typography variant={"h2"} as="h2" className="pt-4 px-4 border-none">
+          <Typography variant={"h2"} as="h2" className="border-none px-4 pt-4">
             {room.name}
           </Typography>
         </div>
@@ -61,7 +61,7 @@ export function RoomItemCard({
             {room.description}
           </Typography>
         </div>
-        <div className="pb-4 mt-auto">
+        <div className="mt-auto pb-4">
           <Separator className="my-4" />
           <div className="flex justify-around">
             <div className="flex flex-row gap-2">

src/components/Search/SearchFilterCard.tsx

@@ -87,7 +87,7 @@ export function SearchFilterCard({
 
   return (
     <Card>
-      <CardHeader className="p-0 m-0 mb-5">
+      <CardHeader className="m-0 mb-5 p-0">
         <Typography variant={"h2"} as="h1" className="mx-5 py-2">
           Reserva ahora
         </Typography>
@@ -96,7 +96,7 @@ export function SearchFilterCard({
         {datePickerElement}
         <Separator className="my-4" />
         <Button size={"lg"} onClick={btSearchClick}>
-          <SearchIcon className="text-primary-foreground me-2" />
+          <SearchIcon className="me-2 text-primary-foreground" />
           <Typography variant={"h3"} className="text-primary-foreground">
             Buscar
           </Typography>

src/components/app-footer.tsx

@@ -1,6 +1,6 @@
 function AppFooter() {
   return (
-    <div className="bg-secondary flex-col hidden">
+    <div className="hidden flex-col bg-secondary">
       <div className="">Created with Love by me :)</div>
       <div className="">
         <p>Más información</p>

src/components/app-header.tsx

@@ -7,15 +7,15 @@ import { BookAIcon, HomeIcon } from "lucide-react";
 
 function AppHeader() {
   return (
-    <Card className="flex items-center mx-10 my-4">
+    <Card className="mx-10 my-4 flex items-center">
       <CardContent className="w-full py-2">
-        <div className="flex justify-around items-center">
-          <div className="flex flex-row items-center gap-2 relative">
+        <div className="flex items-center justify-around">
+          <div className="relative flex flex-row items-center gap-2">
             <img src="public/SR2.svg" className="w-[64px]"></img>
             <Typography variant={"largeText"}>Somnia Rooms</Typography>
             <a
               href="https://duck.com"
-              className="absolute w-[100%] h-[100%]"
+              className="absolute h-[100%] w-[100%]"
             ></a>
           </div>
           <Button variant="ghost" className="h-15">

src/components/booking/booking-details.tsx

@@ -51,7 +51,7 @@ export function BookingDetails({
     return (
       <Card
         key={room.roomCategory.toString() + room.guestNumber.toString()}
-        className="bg-accent flex flex-row my-3 "
+        className="my-3 flex flex-row bg-accent"
       >
         {photo && (
           <img
@@ -60,10 +60,10 @@ export function BookingDetails({
           />
         )}
         <div className="w-full p-3">
-          <Typography variant={"h3"} as="h3" className="text-center m-2">
+          <Typography variant={"h3"} as="h3" className="m-2 text-center">
             {category?.name}
           </Typography>
-          <div className="flex flex-row w-full justify-around">
+          <div className="flex w-full flex-row justify-around">
             <IconWithTooltip
               label={room.guestNumber.toString()}
               labelPosition={"right"}

src/components/ui/carousel.tsx

@@ -204,7 +204,7 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute  h-8 w-8 rounded-full",
+        "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
           ? "-left-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",

src/components/ui/dateRange-picker.tsx

@@ -82,7 +82,7 @@ export function DatePickerWithRange({
   }
 
   return (
-    <div className={cn("grid gap-x-2 grid-cols-2 grid-rows-2", className)}>
+    <div className={cn("grid grid-cols-2 grid-rows-2 gap-x-2", className)}>
       <Typography variant={"largeText"} as="p">
         Desde
       </Typography>

src/routes/Root.tsx

@@ -10,7 +10,7 @@ function Root() {
     <>
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
         <AppHeader />
-        <div className="w-full sm:w-[90%] md:w-[80%] mx-auto p-8 text-center bg-background text-foreground">
+        <div className="mx-auto w-full bg-background p-8 text-center text-foreground sm:w-[90%] md:w-[80%]">
           <Outlet />
         </div>
         <Toaster />

src/routes/home-page.tsx

@@ -29,10 +29,10 @@ function Homepage() {
       <Separator className="my-10" />
       <SearchFilterCard onSearchClick={onBtSearchClick} />
       <Separator className="my-10" />
-      <div className="grid gap-4 homePageRoomGrid">{roomList}</div>
+      <div className="homePageRoomGrid grid gap-4">{roomList}</div>
       {isLoading && (
         <>
-          <Skeleton className="w-full h-[200px] mx-auto flex justify-center items-center flex-col">
+          <Skeleton className="mx-auto flex h-[200px] w-full flex-col items-center justify-center">
             <LoaderIcon />
             <Typography variant={"h3"} as="h2">
               Loading...

src/routes/search-page.tsx

@@ -92,7 +92,7 @@ function SearchPage() {
       <Typography variant={"h3"} as="h2">
         Loading...
       </Typography>
-      <Skeleton className="w-full h-[200px] mx-auto" />
+      <Skeleton className="mx-auto h-[200px] w-full" />
     </>
   ) : (
     <div className="2xl:grid 2xl:grid-cols-60/40 2xl:gap-6">