Migrate Tailwind to v4

package.json

@@ -15,15 +15,15 @@
     "@vercel/speed-insights": "^1.1.0",
     "motion": "^11.16.0",
     "next": "15.2.4",
-    "sharp": "^0.33.5",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
+    "@tailwindcss/postcss": "^4.1.1",
     "eslint": "^8",
     "eslint-config-next": "15.2.4",
     "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^4.1.1"
   }
 }

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

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);
+  }
+}

tailwind.config.js

@@ -1,14 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {},
-    container: {
-      padding: '1rem',
-    },
-  },
-  plugins: [],
-}
-