chore(deps): upgrade to Tailwind CSS v4

assets/css/style.css

@@ -1,4 +1,4 @@
-/* Custom styling goes here, if not in the tailwind.config.js theme */
+/* Custom styling goes here, if not in the @theme block of assets/tailwind.css */
 
 .space-x-20 {
     margin-left: 5rem;

assets/tailwind.css

@@ -2,7 +2,50 @@
 Pull in the pieces of Tailwind that we need.
 This is used to auto-generate output.css at build time
 */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@tailwind variants;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" source(none);
+@source "../layouts";
+
+/*
+  Keep the Tailwind v3 look: system font stacks, fixed line heights for the
+  text sizes, and the v3 hex values of the palette colors used in layouts.
+*/
+@theme {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    Ubuntu, Cantarell, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  --text-xs--line-height: 1rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+
+  --color-slate-50: #f8fafc;
+  --color-slate-200: #e2e8f0;
+  --color-gray-900: #111827;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-rose-600: #e11d48;
+}
+
+/*
+  Tailwind v4 changed the default border color to currentcolor. Keep the v3
+  gray so borders look the same.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}

layouts/_partials/hero.html

@@ -4,7 +4,7 @@
       <div class="md:w-1/2">
         <h1 class="md:text-6xl font-bold cnp-blue text-3xl md:text-left text-center">{{.Title}}</h1>
         <h1 class="md:text-6xl font-bold red-1 pt-2.5 text-3xl md:text-left text-center">{{.Params.subtitle}}</h1>
-        <p class=" gray-4 text-xl md:text-2xl font-light leading-10 py-5 container md:tracking-wider">
+        <p class=" gray-4 text-xl md:text-2xl font-light leading-10 md:leading-8 py-5 container md:tracking-wider">
           {{ .Content | plainify }}
         </p>
         <div class="pt-7 md:text-left text-center">

layouts/_partials/info.html

@@ -10,7 +10,7 @@
     </div>
     <div class="md:w-3/5 md:block">
       <h2 class="md:text-3xl py-4 font-medium cnp-blue text-2xl md:text-left text-center">{{ .context.Title }}</h2>
-      <div class="md:text-xl leading-8 gray-4 text-lg">{{ .context.Content }}</div>
+      <div class="md:text-xl leading-8 md:leading-7 gray-4 text-lg">{{ .context.Content }}</div>
     </div>
   </section>
 </div>
@@ -19,7 +19,7 @@ <h2 class="md:text-3xl py-4 font-medium cnp-blue text-2xl md:text-left text-cent
   <section class="container mx-auto text-left md:flex md:flex-row md:justify-between">
     <div class="md:w-3/5">
       <h2 class="md:text-3xl py-4 font-medium cnp-blue text-2xl">{{ .context.Title }}</h2>
-      <div class="md:text-xl leading-8 gray-4 text-lg">{{ .context.Content }}</div>
+      <div class="md:text-xl leading-8 md:leading-7 gray-4 text-lg">{{ .context.Content }}</div>
     </div>
     <div class="items-center my-auto mx-auto">
       <img src="{{ .context.Params.icon }}" alt="{{.context.Title}}" class="mx-auto" />
@@ -33,7 +33,7 @@ <h2 class="md:text-3xl py-4 font-medium cnp-blue text-2xl">{{ .context.Title }}<
     </div>
     <div class="md:w-3/5">
       <h2 class="md:text-3xl py-4 font-medium text-center cnp-blue text-2xl">{{ .context.Title }}</h2>
-      <div class="md:text-xl leading-8 gray-4 text-lg">{{ .context.Content }}</div>
+      <div class="md:text-xl leading-8 md:leading-7 gray-4 text-lg">{{ .context.Content }}</div>
     </div>
   </section>
 </div>

layouts/home.html

@@ -34,8 +34,8 @@ <h1 class="md:text-xl text-white text-base">This open source project has been or
         <div class="mx-auto md:py-24 md:px-56 px-4 py-8">
             <hr>
         </div>
-        <h1 class="md:text-5xl font-bold red-1 leading-10 md:pt-4 text-3xl">100%</h1>
-        <h1 class="md:text-5xl font-bold text-white leading-10 md:pt-4 text-3xl">Open Source</h1>
+        <h1 class="md:text-5xl font-bold red-1 leading-10 md:leading-none md:pt-4 text-3xl">100%</h1>
+        <h1 class="md:text-5xl font-bold text-white leading-10 md:leading-none md:pt-4 text-3xl">Open Source</h1>
         <p class="md:text-xl text-white md:w-2/5 mx-auto mt-10 text-lg px-4">
             CloudNativePG is 100% open source and community-driven.
             All components are available under the <a