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

.gitignore

@@ -47,4 +47,7 @@ bun.lockb
 package-lock.json
 
 # vs code
-.vscode/
+.vscode/
+
+# webstorm
+.idea/

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;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
-:root {
+@theme {
-  --foreground-rgb: 255, 255, 255;
+  --color-background: var(--background);
-  --background-start-rgb: 0, 0, 0;
+  --color-foreground: var(--foreground);
-  --background-end-rgb: 0, 0, 0;
 }
 
-body {
+/*
-  color: rgb(var(--foreground-rgb));
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  background: linear-gradient(
+  so we've added these compatibility styles to make sure everything still
-      to bottom,
+  looks the same as it did with Tailwind CSS v3.
-      transparent,
+
-      rgb(var(--background-end-rgb))
+  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.
-    rgb(var(--background-start-rgb));
+*/
+@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 {
+  :root {
-    text-wrap: balance;
+    --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 />

components/Header.tsx

@@ -30,7 +30,7 @@ export default function Header() {
         <Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
           aidxn.cc
         </Link>
-        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
+        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-hidden">
           {isOpen ? <X className="text-2xl" /> : <Menu className="text-2xl" />}
         </button>
         <ul className={`flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto p-4 md:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden md:flex'}`}>

components/objects/BackButton.tsx

@@ -12,7 +12,7 @@ const BackButton: React.FC<BackButtonProps> = ({ href, label = 'Back' }) => {
   return (
     <Link 
       href={href}
-      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
       aria-label={`Go back to ${label}`}
     >
       <FontAwesomeIcon icon={faArrowLeft} className="mr-2" />

components/objects/Button.tsx

@@ -10,7 +10,7 @@ const MusicInfoButton: React.FC<MusicInfoButtonProps> = ({ href, label }) => {
   return (
     <Link 
       href={href}
-      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
     >
       {label}
     </Link>

components/widgets/FeaturedRepos.tsx

@@ -13,7 +13,7 @@ export default function GitHubFeatured() {
             <h3 className="text-xl font-bold text-gray-100 mb-3">
               <FontAwesomeIcon icon={project.github ? faGithub : faGitAlt} className="mr-2" /> {project.name}
             </h3>
-            <p className="text-gray-300 flex-grow">{project.description}</p>
+            <p className="text-gray-300 grow">{project.description}</p>
           </div>
           <div className="pt-4 border-t border-gray-700 flex justify-between items-center mt-auto">
             <Link href={project.url} className="text-blue-400 hover:underline">View Repo</Link>

components/widgets/LastPlayed.tsx

@@ -40,7 +40,7 @@ const LastPlayed: React.FC = () => {
   return (
     <div className="max-w-2xl mx-auto mb-12">
       <h2 className="text-2xl font-bold mb-4 text-gray-200">Last Played Song</h2>
-      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg">
+      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white/10 backdrop-filter backdrop-blur-lg">
         <Image 
           src={track.image.find(img => img.size === 'large')?.['#text'] || '/placeholder.png'} 
           alt={track.name} 

components/widgets/Music.tsx

@@ -59,7 +59,7 @@ export default function Home() {
             id="timePeriod"
             value={timePeriod}
             onChange={(e) => setTimePeriod(e.target.value)}
-            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded"
+            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded-sm"
           >
             <option value="Early Summer 2024">Early Summer 2024</option>
           </select>

package.json

@@ -15,19 +15,20 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "geist": "^1.3.1",
     "lucide-react": "^0.469.0",
-    "next": "15.1.3",
+    "next": "^15.2.0-canary.63",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^20.17.19",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.3",
+    "@types/react-dom": "^19.0.4",
-    "postcss": "^8.5.2",
-    "tailwindcss": "^3.4.17",
     "eslint": "^9.20.1",
     "eslint-config-next": "15.1.3",
-    "@eslint/eslintrc": "^3.2.0"
+    "postcss": "^8.5.2",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.3"
   }
 }

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

tailwind.config.ts

@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;