Migrate Tailwind to v4

src/app/components/Footer.js

@@ -37,7 +37,7 @@ export default function Footer() {
           </a>
         </h3>
       </div>
-      <p>Copyright © Te Atatu Computer Repair, 2025</p>
+      <p>Copyright © Te Atatu Computer Repair, {new Date().getFullYear()}</p>
     </footer>
   );
 }

src/app/components/Navbar.js

@@ -46,7 +46,7 @@ export default function Navbar() {
   useOutsideAlerter(wrapperRef);
 
   return (
-    <nav className={`${styles.navbar} shadow`}>
+    <nav className={`${styles.navbar} shadow-sm`}>
       <div className={`${styles.container} container mx-auto`} ref={wrapperRef}>
         <div className={styles.header}>
           <div>

src/app/contact/page.js

@@ -64,7 +64,7 @@ export default function Home() {
 
           <p className={styles.sm}>* required</p>
 
-          <input type="submit" value="Submit" required />
+          <input type="submit" value="Submit" required className="text-white bg-sky-800 hover:bg-sky-700 transition" />
         </form>
       </section>
     </div>

src/app/contact/page.module.css

@@ -19,16 +19,11 @@
 
 /* Style the submit button */
 .form input[type="submit"] {
-  background-color: var(--accent);
-  color: white;
   padding: 1em 1.75em;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
-.form input[type="submit"]:hover {
-  background-color: var(--accent-secondary);
-}
 
 .sm {
     font-size: 0.75em;

src/app/globals.css

@@ -1,3 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@utility container {
+  padding-inline: 1rem;
+}
+
+/*
+  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);
+  }
+}