bump (move to next@canary), use tailwindcss v4

app/about/page.tsx

@@ -6,7 +6,7 @@ export default function About() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <AboutPg />
       </main>
       <Footer />

app/contact/page.tsx

@@ -6,7 +6,7 @@ export default function Contact() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <ContactPg />
       </main>
       <Footer />

app/domains/page.tsx

@@ -6,7 +6,7 @@ export default function Domains() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <DomainsPg />
       </main>
       <Footer />

app/globals.css

@@ -1,26 +1,47 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-:root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 0, 0, 0;
-  --background-end-rgb: 0, 0, 0;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+/*
+  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;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+
+  body {
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(
+        to bottom,
+        transparent,
+        rgb(var(--background-end-rgb))
+      )
+      rgb(var(--background-start-rgb));
   }
 }
 

app/manifesto/page.tsx

@@ -6,7 +6,7 @@ export default function Manifesto() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <ManifestoPg />
       </main>
       <Footer />

app/music/page.tsx

@@ -7,7 +7,7 @@ export default function Music() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <MusicWidget />
         <MusicInfo />
       </main>

app/page.tsx

@@ -6,7 +6,7 @@ export default function Home() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <HomePg />
       </main>
       <Footer />

app/time-periods/early-summer-2024/page.tsx

@@ -6,7 +6,7 @@ export default function EarlySummer2024() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />

app/time-periods/early-summer-2024/what-was-going-on/page.tsx

@@ -6,7 +6,7 @@ export default function Music() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />

app/time-periods/late-summer-2024/page.tsx

@@ -6,7 +6,7 @@ export default function LateSummer2024() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />

app/time-periods/late-summer-2024/what-was-going-on/page.tsx

@@ -6,7 +6,7 @@ export default function Music() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />