chore: update Tailwind CSS from 3.4.15, to 4.1.11

- Changed the PostCSS configuration to use '@tailwindcss/postcss' instead of 'tailwindcss'.
- Deleted the Tailwind configuration file as it is no longer needed.

app/globals.css

@@ -1,41 +1,103 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
+@custom-variant dark (@media (prefers-color-scheme: dark));
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-hover: hsl(var(--hover));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility text-balance {
+  text-wrap: balance;
+}
+
+@utility animate-scroll {
+  animation: scroll 8s linear infinite;
+}
+
+@utility animate-infinite-scroll {
+  animation: infiniteScroll 10s linear infinite;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-  
-  .animate-scroll {
-    animation: scroll 8s linear infinite;
-  }
-  
-  .animate-infinite-scroll {
-    animation: infiniteScroll 10s linear infinite;
+  body {
+    font-family: Arial, Helvetica, sans-serif;
   }
 }
 
-@keyframes scroll {
-  0%, 20% {
-    transform: translateX(0);
+@layer utilities {
+  @keyframes scroll {
+    0%,
+    20% {
+      transform: translateX(0);
+    }
+    80%,
+    100% {
+      transform: translateX(-100%);
+    }
   }
-  80%, 100% {
-    transform: translateX(-100%);
-  }
-}
 
-@keyframes infiniteScroll {
-  0% {
-    transform: translateX(15%);
-  }
-  100% {
-    transform: translateX(-215%);
+  @keyframes infiniteScroll {
+    0% {
+      transform: translateX(15%);
+    }
+    100% {
+      transform: translateX(-215%);
+    }
   }
 }
 
@@ -263,7 +325,8 @@ body {
 
 
 
-/* BackUp */
+@layer utilities {
+  /* BackUp */
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
@@ -293,18 +356,19 @@ body {
     --radius: 0.5rem;
   }
 
+  :focus-visible {
+    outline-color: rgb(59, 130, 246);
+  }
+  ::selection {
+    background-color: rgb(59, 130, 246);
+  }
+  ::marker {
+    color: rgb(59, 130, 246);
+  }
 
-
-
-
-:focus-visible { outline-color: rgb(59, 130, 246); }
-::selection { background-color: rgb(59, 130, 246); }
-::marker { color: rgb(59, 130, 246); }
-
-
-
-::selection {
-  background: var(--primary);
+  ::selection {
+    background: var(--primary);
+  }
 }
 
 @layer base {