fix(site): updating and fixing up tailwind v4 issues

Author: Vheissu

package-lock.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0-beta.7",
-    "@tailwindcss/postcss": "^0.0.0-development.1",
+    "@tailwindcss/postcss": "^4.0.0-beta.7",
     "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.20",
     "concurrently": "^9.1.0",

package.json

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

postcss.config.js

@@ -1,40 +1,76 @@
-@import "tailwindcss/preflight";
-@import "tailwindcss/utilities";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --color-aurelia: #ed2b88;
+  --color-aurelia-light: #ff4da1;
+  --color-aurelia-blue: #003f8c;
+  --color-aurelia-blue-light: #0066cc;
+
+  --animation-float-slow: float 8s ease-in-out infinite;
+  --animation-float-delayed: float 6s ease-in-out infinite 2s;
+  --animation-grid: grid 20s linear infinite;
+  --animation-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animation-pulse-slow: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animation-pulse-slower: pulse 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animation-pulse-delayed: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite 2s;
+}
+
+@layer keyframes {
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0) rotate(0);
+    }
+    50% {
+      transform: translateY(-20px) rotate(5deg);
+    }
+  }
+  @keyframes grid {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+}
 
 @layer utilities {
   .animate-float {
     animation: float 8s ease-in-out infinite;
   }
-  
   .animate-float-delayed {
     animation: float 8s ease-in-out infinite;
     animation-delay: -4s;
   }
-  
+
   .animate-gradient-x {
     background-size: 200% 100%;
     animation: gradient-x 15s ease infinite;
   }
-  
+
   .animate-gradient-x-fast {
     animation-duration: 8s;
   }
-  
+
   @keyframes float {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateY(0) scale(1);
     }
     50% {
       transform: translateY(-20px) scale(1.05);
     }
   }
-  
+
   @keyframes gradient-x {
-    0%, 100% {
+    0%,
+    100% {
       background-position: 0% 50%;
     }
     50% {
       background-position: 100% 50%;
     }
   }
-}
+}

themes/aurelia-theme/assets/css/main.css

@@ -27,9 +27,9 @@
   </div>
 
   <!-- Hero Content -->
-  <div class="relative z-10 flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Left Column: Content -->
-    <div class="text-center lg:text-left max-w-2xl w-full lg:w-auto">
+    <div class="text-center lg:text-left lg:flex-1 max-w-xl">
       <div class="mb-4">
         <span class="inline-block px-4 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium">
           <span class="mr-2">🚀</span> v2.0 Now Available
@@ -88,7 +88,7 @@ <h1 class="text-4xl sm:text-6xl font-bold mb-6">
     </div>
 
     <!-- Right Column: Interactive Demo -->
-    <div class="w-full lg:w-auto max-w-lg">
+    <div class="lg:flex-1 w-full max-w-xl lg:max-w-md">
       <div class="relative">
         <!-- Code Preview Tabs -->
         <div class="rounded-xl bg-gray-900 p-4 shadow-2xl transform hover:-translate-y-1 transition-transform">

themes/aurelia-theme/layouts/index.html

@@ -1,8 +1,8 @@
 {{ $css := resources.Get "css/main.css" }}
-{{ $styles := $css | css.TailwindCSS }}
+{{ $styles := $css | css.PostCSS }}
 
 {{ if hugo.IsProduction }}
-  {{ $styles = $styles | minify | fingerprint }}
+  {{ $styles = $styles | fingerprint }}
   <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
 {{ else }}
   <link rel="stylesheet" href="{{ $styles.RelPermalink }}">