Added Prettier for TailwindCSS.

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package-lock.json

@@ -44,7 +44,8 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
         "postcss": "^8.4.38",
-        "prettier": "3.3.3",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.6",
         "tailwindcss": "^3.4.3",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.2.2",
@@ -2397,12 +2398,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -3068,10 +3070,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -3414,6 +3417,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -3594,12 +3598,13 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -4058,6 +4063,85 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz",
+      "integrity": "sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4701,6 +4785,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },

package.json

@@ -47,7 +47,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.38",
-    "prettier": "3.3.3",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",

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">
+      <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="p-5 w-full h-full flex flex-col justify-center gap-4">
+        <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 items-center justify-around">
-          <div className="flex flex-row items-center gap-2 relative">
+          <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">