Repository: geluso/206bikepolo.com
Pull request #8: Add Tailwind dependencies to access Tailwind classes + navigation tab UI update 
Author: login: aproberts01
Created: 2025-04-18T23:37:12Z | Merged: 2025-04-19T04:06:18Z

**Changes:**

1. I added in Tailwind versioning updates + additional dependencies in order to get Tailwind v3 classes working.
2. Migration to Tailwind v4 will come later in separate PR.
3. Updated Navigation tabs to more refined and modern UI look
4. Some updates to the nested list formatting as requested by @ab12gu 

**Web:**
<img width="1200" alt="Screenshot 2025-04-18 at 4 38 06 PM" src="https://github.com/user-attachments/assets/06f4a359-caf5-4545-9846-c8864aa4da23" />

**Mobile:**
<img width="685" alt="Screenshot 2025-04-18 at 4 30 55 PM" src="https://github.com/user-attachments/assets/786fe4e9-79f5-4a62-b536-fe0c4296da01" />




Diff:
diff --git a/app/components/NavItem.tsx b/app/components/NavItem.tsx
new file mode 100644
index 0000000..28b5ae4
--- /dev/null
+++ b/app/components/NavItem.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+interface NavItemProps {
+  href: string;
+  label: string;
+}
+
+const NavItem: React.FC<NavItemProps> = ({ href, label }) => {
+  return (
+    <Link
+      href={href}
+      className="block py-2 px-3 text-white"
+    >
+      {label}
+    </Link>
+  );
+};
+
+export default NavItem;
diff --git a/app/components/NavigationTabs.tsx b/app/components/NavigationTabs.tsx
new file mode 100644
index 0000000..7b607b3
--- /dev/null
+++ b/app/components/NavigationTabs.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import NavItem from "./NavItem";
+
+interface Tab {
+  label: string;
+  href: string;
+}
+
+interface NavigationTabsProps {
+  tabs: Tab[];
+}
+
+const NavigationTabs: React.FC<NavigationTabsProps> = ({ tabs }) => {
+  return (
+    <nav className="bg-gray-900 sticky w-full z-20 top-0 start-0">
+      <div className="max-w-screen-xl flex flex-wrap items-center md:justify-between justify-evenly mx-auto p-4">
+        <a href="/" className="flex items-center space-x-3">
+          <span className="self-center text-2xl font-semibold whitespace-nowrap text-white">
+            Seattle Bike Polo
+          </span>
+        </a>
+        <div className="flex w-auto">
+          <ul className="flex space-x-2 md:space-x-8">
+            {tabs.map((tab, index) => (
+              <li className="mb-px mr-1" key={index}>
+                <NavItem label={tab.label} href={tab.href} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default NavigationTabs;
diff --git a/app/globals.css b/app/globals.css
index e311111..d23b4b5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,4 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -8,6 +9,10 @@ img, svg, video, canvas, audio, iframe, embed, object {
   vertical-align: middle;
 }
 
+a {
+  @apply text-blue-600 hover:text-blue-800
+}
+
 img, video {
   max-width: 100%;
   height: auto;
@@ -21,14 +26,7 @@ body {
 
 #main {
   width: 800px;
-  min-height: 80vh;
-  margin: auto;
-  padding: 1em;
-  margin-top: 4em;
-  border: solid black 1px;
-  background-color: white;
   font-family: monospace;
-  position: relative;
 }
 
 #main h1 .center {
diff --git a/app/layout.tsx b/app/layout.tsx
index a3e4f36..1d34cb9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import NavigationTabs from "./components/NavigationTabs";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -9,6 +10,13 @@ export const metadata: Metadata = {
   description: "206 Seattle Bike Polo",
 };
 
+const NAV_TABS = [
+  { label: "Home", href: "/" },
+  { label: "Rumble", href: "/rumble" },
+  { label: "Tournaments", href: "/tournaments" },
+  { label: "History", href: "/history" },
+];
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -21,24 +29,9 @@ export default function RootLayout({
         <link rel="icon" href="/favicon.ico" sizes="any" />
       </head>
       <body className={inter.className}>
-        <div id="main">
-          <div className="tournament-nav-container">
-            <a href="/">
-              <button>Home</button>
-            </a>
-            <a href="/rumble">
-              <button>🌹🏙️👑 Rumble</button>
-            </a>
-            <a href="/tournaments">
-              <button>🏆 Tournaments</button>
-            </a>
-            <a href="/history">
-              <button>⏳ History</button>
-            </a>
-          </div>
-          <div>
-            {children}
-          </div>
+        <div className="min-h-screen bg-white m-auto" id="main">
+          <NavigationTabs tabs={NAV_TABS} />
+          <div className="px-4 mt-8">{children}</div>
         </div>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 56e7bd1..d049c47 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,70 +1,116 @@
 import Image from "next/image";
-import judkinsPlayTimes from "../public/img/judkins_play_times.png"
-import cascadiaQualifier2024 from "../public/img/cascadia_qualifier_2024.png"
-import aprilNewbieDay from "../public/img/april_newbie_day.png"
+import judkinsPlayTimes from "../public/img/judkins_play_times.png";
+import cascadiaQualifier2024 from "../public/img/cascadia_qualifier_2024.png";
+import aprilNewbieDay from "../public/img/april_newbie_day.png";
 
 export default function Home() {
-  return <div>
-    <div className="logo">
-      <img src="./img/206_seattle_bike_polo_logo.png" />
-    </div>
-
-    <h1>Seattle Bike Polo</h1>
-
-    <ul>
-      <li>We play at Judkins Park <a href="https://maps.app.goo.gl/UxkWUMPTLsNPhg5WA">47.591401,-122.302915</a></li>
+  return (
+    <div>
+      <div className="logo">
+        <img src="./img/206_seattle_bike_polo_logo.png" />
+      </div>
+      <h2 className="my-2 text-2xl font-extrabold">General Info</h2>
+      <p>
+        We play at Judkins Park{" "}
+        <a href="https://maps.app.goo.gl/UxkWUMPTLsNPhg5WA">
+          47.591401,-122.302915
+        </a>
+      </p>
       <ul>
-        <li>Saturdays 2PM till dark</li>
-        <li>Sundays 11AM till dark</li>
-        <li>Wednesdays 6PM till dark</li>
+        <ul className="ps-6 my-2 list-disc list-inside">
+          <li>Saturdays 2PM till dark</li>
+          <li>Sundays 11AM till dark</li>
+          <li>Wednesdays 6PM till dark</li>
+        </ul>
+        <li>
+          <a href="https://www.instagram.com/206bikepolo/">@206bikepolo</a> on
+          Instagram
+        </li>
+        <li>
+          Talk to everyone on{" "}
+          <a href="https://join.slack.com/t/seattlebikepolo/shared_invite/zt-2m8wd3zl2-RxZBe~fmA_1abfLNSAZ5yg">
+            Slack
+          </a>
+        </li>
+        <li>
+          Rules? Don&apos;t be a dick. Also{" "}
+          <a href="/docs/2022-nah-ruleset.pdf">official NAH rules</a> and the{" "}
+          <a href="/docs/polo_bible.pdf">polo bible</a>.
+        </li>
       </ul>
-      <li><a href="https://www.instagram.com/206bikepolo/">@206bikepolo</a> on Instagram</li>
-      <li>Talk to everyone on <a href="https://join.slack.com/t/seattlebikepolo/shared_invite/zt-2m8wd3zl2-RxZBe~fmA_1abfLNSAZ5yg">Slack</a></li>
-      <li>Rules? Don&apos;t be a dick. Also <a href="/docs/2022-nah-ruleset.pdf">official NAH rules</a> and the <a href="/docs/polo_bible.pdf">polo bible</a>.</li>
-    </ul>
-
-    <h2>New Players</h2>
-    <p>We love new players! Come hang out.</p>
-    <ul>
-      <li>
-        We meet Wednesday evenings around 5pm until sundown, specifically for newbies!
-      </li>
-      <li>
-        We have extra mallets and bicycles to borrow!
-      </li>
-      <li>
-        Feel free to stop by with your everyday rider and we can get you in a couple games that day!
-      </li>
-    </ul>
-    <p>
-      When ready, we can help you pick out components to build up a single speed, flat bar polo bike!
-    </p>
 
-    <h2>  Tournaments </h2>
-    <ul>
-      <li>See tournaments on <a href="https://bikepolocalendar.com/event/the-cascadia-triple-crown-emerald-city-open">bikepolocalendar.com</a></li>
-      <li><a href="/rumble">🌹 2025 Rose City Royal Rumble 🥀</a> [April 5-6, 2025]</li>
-      <li>Come out October 26th and 27th 2024 for the <a
-          href="https://bikepolocalendar.com/event/the-cascadia-triple-crown-emerald-city-open">Emerald City Open: Cascadia Triple Crown</a>
-      </li>
-      <ul>
-        <li>Tournament information <a href="/tournaments/2024-emerald-city-open-cascadia-triple-crown">here</a></li>
-        <li>Register for ECO <a href="https://forms.gle/6z6ba3aCkqtqJS416">here</a></li>
+      <h2 className="my-2 text-2xl font-extrabold">New Players</h2>
+      <p className="mb-2">We love new players! Come hang out.</p>
+      <ul className="ps-6 my-2 list-disc list-inside">
+        <li>
+          We meet Wednesday evenings around 5pm until sundown, specifically for
+          newbies!
+        </li>
+        <li>We have extra mallets and bicycles to borrow!</li>
+        <li>
+          Feel free to stop by with your everyday rider and we can get you in a
+          couple games that day!
+        </li>
+      </ul>
+      <p className="mt-2">
+        When ready, we can help you pick out components to build up a single
+        speed, flat bar polo bike!
+      </p>
+      <h2 className="my-2 text-2xl font-extrabold">Tournaments</h2>
+      <ul className="ps-6 my-2 list-disc list-inside">
+        <li>
+          See tournaments on{" "}
+          <a href="https://bikepolocalendar.com/event/the-cascadia-triple-crown-emerald-city-open">
+            bikepolocalendar.com
+          </a>
+        </li>
+        <li>
+          <a href="/rumble">🌹 2025 Rose City Royal Rumble 🥀</a> [April 5-6,
+          2025]
+        </li>
+        <li>
+          Come out October 26th and 27th 2024 for the{" "}
+          <a href="https://bikepolocalendar.com/event/the-cascadia-triple-crown-emerald-city-open">
+            Emerald City Open: Cascadia Triple Crown
+          </a>
+        </li>
+        <ul className="list-disc list-inside">
+          <li>
+            Tournament information{" "}
+            <a href="/tournaments/2024-emerald-city-open-cascadia-triple-crown">
+              here
+            </a>
+          </li>
+          <li>
+            Register for ECO{" "}
+            <a href="https://forms.gle/6z6ba3aCkqtqJS416">here</a>
+          </li>
+        </ul>
+        <li>
+          Come out June 1st and 2nd 2024 for the{" "}
+          <a href="https://bikepolocalendar.com/event/nah-cascadia-qualifier">
+            Cascadia Qualifier
+          </a>
+        </li>
       </ul>
-      <li>Come out June 1st and 2nd 2024 for the <a
-          href="https://bikepolocalendar.com/event/nah-cascadia-qualifier">Cascadia Qualifier</a></li>
-    </ul>
 
-    <p>Edit this website on <a href="https://github.com/geluso/206bikepolo.com">GitHub</a>.</p>
+      <p className="mt-2">
+        Edit this website on{" "}
+        <a href="https://github.com/geluso/206bikepolo.com">GitHub</a>.
+      </p>
 
-    <div>
-      <a href="http://localhost:3001/tournaments/2024-emerald-city-open-cascadia-triple-crown">
-        <img src="/img/2024_eco_3xcrown1.png" />
-      </a>
-    </div>
+      <div>
+        <a href="http://localhost:3001/tournaments/2024-emerald-city-open-cascadia-triple-crown">
+          <img src="/img/2024_eco_3xcrown1.png" />
+        </a>
+      </div>
 
-    <Image src={judkinsPlayTimes} alt="Sign showing Judkins play times" />
-    <Image src={cascadiaQualifier2024} alt="Cascadia Qualifiers 2024 poster" />
-    <Image src={aprilNewbieDay} alt="Poster for April Newbie Day" />
-  </div>
+      <Image src={judkinsPlayTimes} alt="Sign showing Judkins play times" />
+      <Image
+        src={cascadiaQualifier2024}
+        alt="Cascadia Qualifiers 2024 poster"
+      />
+      <Image src={aprilNewbieDay} alt="Poster for April Newbie Day" />
+    </div>
+  );
 }
diff --git a/package-lock.json b/package-lock.json
index 9f716d6..8a50d64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,11 +20,12 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "autoprefixer": "^10.4.21",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
-        "postcss": "^8",
+        "postcss": "^8.5.3",
         "prisma": "^6.5.0",
-        "tailwindcss": "^3.4.1",
+        "tailwindcss": "^3.4.17",
         "typescript": "^5"
       }
     },
@@ -1422,6 +1423,44 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1484,17 +1523,51 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1544,9 +1617,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001612",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
-      "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
+      "version": "1.0.30001713",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz",
+      "integrity": "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -1560,7 +1633,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/cfb": {
       "version": "1.2.2",
@@ -1702,6 +1776,7 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -1880,6 +1955,13 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.137",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.137.tgz",
+      "integrity": "sha512-/QSJaU2JyIuTbbABAo/crOs+SuAZLS+fVVS10PVrIT9hrRkmZl8Hb0xPSkKRUUWHQtYzXHpQUW3Dy5hwMzGZkA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2109,6 +2191,16 @@
         "esbuild": ">=0.12 <1"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2601,10 +2693,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2681,6 +2774,20 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3272,6 +3379,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -3472,10 +3580,11 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
-      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -3583,12 +3692,16 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
     "node_modules/lines-and-columns": {
@@ -3648,12 +3761,13 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -3708,15 +3822,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3806,6 +3921,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3815,6 +3937,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4119,9 +4251,10 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -4163,9 +4296,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "dev": true,
       "funding": [
         {
@@ -4181,10 +4314,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -4261,42 +4395,38 @@
         }
       }
     },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
-      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
     "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
+        "postcss-selector-parser": "^6.1.1"
       },
       "engines": {
         "node": ">=12.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
       "peerDependencies": {
         "postcss": "^8.2.14"
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -4789,9 +4919,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5070,33 +5201,34 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
-      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -5147,6 +5279,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -5319,6 +5452,37 @@
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5332,7 +5496,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/which": {
       "version": "2.0.2",
diff --git a/package.json b/package.json
index 58940d1..9c37a98 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,12 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
-    "postcss": "^8",
+    "postcss": "^8.5.3",
     "prisma": "^6.5.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
 }


Reviews:
user: login: aproberts01
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-18T23:39:51Z
user: login: geluso
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-19T04:03:09Z
user: login: geluso
body: Looks great. is there anything new in this new version of tailwind that you especially like? just curious
state: APPROVED
author_association: OWNER
submitted_at: 2025-04-19T04:06:09Z

Review comments:
diff_hunk: @@ -8,6 +9,10 @@ img, svg, video, canvas, audio, iframe, embed, object {
   vertical-align: middle;
 }
 
+a {
path: app/globals.css
user: login: aproberts01
body: I had to add link styling back in here because Tailwind hates default browser styling apparently.
created_at: 2025-04-18T23:39:51Z
author_association: COLLABORATOR
diff_hunk: @@ -8,6 +9,10 @@ img, svg, video, canvas, audio, iframe, embed, object {
   vertical-align: middle;
 }
 
+a {
path: app/globals.css
user: login: geluso
body: lol yeah tailwind sure does hate default. nice fix. 
created_at: 2025-04-19T04:03:09Z
author_association: OWNER

PR comments:
user: login: vercel[bot]
created_at: 2025-04-18T23:37:17Z
body: [vc]: #qSwtosB3SI70BI+hwiZFbtljwj9jSU7WgcGf5j6kmVY=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiIyMDZiaWtlcG9sby1jb20iLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiMjA2YmlrZXBvbG8tY29tLWdpdC10YWlsd2luZC1zdHlsaW5nLXN0ZXZlLWdlbHVzb3MtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vc3RldmUtZ2VsdXNvcy1wcm9qZWN0cy8yMDZiaWtlcG9sby1jb20vOEtObzRNMjVYTDlxOUxKZVZTd3FkaHlpdjE1TiIsInByZXZpZXdVcmwiOiIyMDZiaWtlcG9sby1jb20tZ2l0LXRhaWx3aW5kLXN0eWxpbmctc3RldmUtZ2VsdXNvcy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwicm9vdERpcmVjdG9yeSI6bnVsbH1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **206bikepolo-com** | ✅ Ready ([Inspect](https://vercel.com/steve-gelusos-projects/206bikepolo-com/8KNo4M25XL9q9LJeVSwqdhyiv15N)) | [Visit Preview](https://206bikepolo-com-git-tailwind-styling-steve-gelusos-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/206bikepolo-com-git-tailwind-styling-steve-gelusos-projects.vercel.app?via=pr-comment-feedback-link) | Apr 19, 2025 0:16am |


author_association: NONE
user: login: geluso
created_at: 2025-04-19T04:03:50Z
body: this looks great. the nav was due for a revamp so we we've added more tabs. 
author_association: OWNER
user: login: ab12gu
created_at: 2025-04-20T03:45:07Z
body: Now i know ali has an iphone 12 pro
author_association: COLLABORATOR