Update to Tailwind v2

taylorbryant · Dec 6, 2020 · d9bc9bf · d9bc9bf
1 parent e9d1c42
commit d9bc9bf
Show file tree

Hide file tree

Showing 11 changed files with 1,660 additions and 314 deletions.
diff --git a/components/footer.js b/components/footer.js
@@ -1,18 +1,24 @@
-function Footer() {
+export default function Footer() {
   return (
     <footer className="bg-blue-500">
-      <ul className="flex items-center justify-between max-w-4xl p-4 mx-auto text-sm text-white md:p-8">
+      <ul className="flex items-center justify-between lg:container px-4 py-6 mx-auto text-sm text-white md:px-6">
         <li>
           Created by{" "}
-          <a href="https://bryant.io" target="_blank" className="font-bold">
+          <a
+            href="https://taylorbrynat.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-bold"
+          >
             Taylor Bryant
           </a>
         </li>
 
         <li>
           <a
-            href="https://github.com/oddstronaut/tailwind-next"
+            href="https://github.com/oddstronaut/next-starter-tailwind"
             target="_blank"
+            rel="noopener noreferrer"
             className="font-bold"
           >
             GitHub
@@ -22,5 +28,3 @@ function Footer() {
     </footer>
   );
 }
-
-export default Footer;
diff --git a/components/header.js b/components/header.js
@@ -1,28 +1,27 @@
 import Link from "next/link";
 import { useState } from "react";
+import cn from "classnames";
+import Image from "next/image";
 
-function Header() {
-  const [isExpanded, toggleExpansion] = useState(false);
+export default function Header() {
+  const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
 
   return (
-    <header className="bg-teal-500">
-      <div className="flex flex-wrap items-center justify-between max-w-4xl p-4 mx-auto md:flex-no-wrap md:p-8">
+    <header className="bg-green-600">
+      <div className="flex flex-wrap items-center justify-between lg:container px-4 py-6 mx-auto md:flex-no-wrap md:px-6">
         <div className="flex items-center">
-          <img
-            src="tailwind-logo.svg"
-            className="w-10 mr-3 text-white"
-          />
+          <Image src="/tailwind-logo.svg" width={40} height={40} priority />
 
           <Link href="/">
-            <a className="text-xl font-bold text-white">
+            <a className="text-lg md:text-xl font-bold ml-3 text-white">
               Next.js Starter Tailwind
             </a>
           </Link>
         </div>
 
         <button
           className="flex items-center block px-3 py-2 text-white border border-white rounded md:hidden"
-          onClick={() => toggleExpansion(!isExpanded)}
+          onClick={() => setMobileMenuIsOpen(!mobileMenuIsOpen)}
         >
           <svg
             className="w-3 h-3 fill-current"
@@ -35,17 +34,18 @@ function Header() {
         </button>
 
         <ul
-          className={`${
-            isExpanded ? `block` : `hidden`
-          } md:flex flex-col md:flex-row md:items-center md:justify-center text-sm w-full md:w-auto`}
+          className={cn(
+            "md:flex flex-col md:flex-row md:items-center md:justify-center text-sm w-full md:w-auto",
+            mobileMenuIsOpen ? `block` : `hidden`
+          )}
         >
           {[
             { title: "Home", route: "/" },
-            { title: "About", route: "/about" }
-          ].map(navigationItem => (
-            <li className="mt-3 md:mt-0 md:ml-6" key={navigationItem.title}>
-              <Link href={navigationItem.route}>
-                <a className="block text-white">{navigationItem.title}</a>
+            { title: "About", route: "/about" },
+          ].map(({ route, title }) => (
+            <li className="mt-3 md:mt-0 md:ml-6" key={title}>
+              <Link href={route}>
+                <a className="block text-white">{title}</a>
               </Link>
             </li>
           ))}
@@ -54,5 +54,3 @@ function Header() {
     </header>
   );
 }
-
-export default Header;
diff --git a/components/layout.js b/components/layout.js
@@ -1,16 +1,16 @@
 import Header from "./header";
 import Footer from "./footer";
 
-function Layout(props) {
+export default function Layout(props) {
   return (
     <div className="flex flex-col min-h-screen">
       <Header />
-      <main className="flex-1 w-full max-w-4xl p-4 mx-auto md:px-8 md:py-16">
+
+      <main className="flex-1 lg:container px-4 py-6 mx-auto md:px-6 md:py-12">
         {props.children}
       </main>
+
       <Footer />
     </div>
   );
 }
-
-export default Layout;
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"]
+    }
+  }
+}