fix(again): Fonts issue?

pages/index.tsx

@@ -1,50 +1,57 @@
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 import Navbar from '../components/Navbar'
 
-function GetTimeString() {
+const IndexPage = () => {
-  const hours = new Date().getHours()
+  const [timeString, setTimeString] = useState('Morning')
 
-  if (hours < 12) {
+  useEffect(() => {
-    return 'Morning'
+    const hours = new Date().getHours()
-  } else if (hours >= 12 && hours <= 17) {
+
-    return 'Afternoon'
+    console.log(new Date())
-  } else if (hours >= 17 && hours <= 24) {
+  
-    return 'Evening'
+    if (hours < 12) {
-  }
+      setTimeString('Morning')
+    } else if (hours >= 12 && hours <= 17) {
+      setTimeString('Afternoon')
+    } else if (hours >= 17 && hours <= 24) {
+      setTimeString('Evening')
+    }
+  })
+
+  return (
+    <div id='app'>
+      <main className="bg-gray-800 w-screen h-full min-h-screen">
+        <Navbar links={[
+          { label: 'Home', href: '/' },
+          { label: 'Portfolio', href: '/portfolio' },
+          { label: 'Projects', href: '/projects' },
+        ]} />
+
+        <header className="flex flex-wrap flex-col overflow-hidden space-y-2 px-36 items-center justify-center h-screen w-screen">
+          <div className="my-3 px-3 w-full text-center">
+            <h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span className="text-blue-500">{timeString}</span>! I&apos;m <span className="text-purple-400">Jack Merrill</span>.</h1>
+          </div>
+          <div className="my-3 px-3 w-full text-center">
+            <h2 className="text-white font-bold md:text-4xl text-2xl">A Graphic and UI/UX Designer and Fullstack Developer from Chicago.</h2>
+          </div>
+          <div className="inline-flex items-center justify-center content-center space-x-4 my-3 px-3 w-full text-center">
+            <Link href="/portfolio">
+              <a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white">
+                See my Work
+              </a>
+            </Link>
+            <span className="text-sm font-light text-gray-400">or</span>
+            <Link href="mailto:me@jackmerrill.com">
+              <a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white">
+                Contact Me
+              </a>
+            </Link>
+          </div>
+        </header>
+      </main>
+    </div>
+  )
 }
 
-const IndexPage = () => (
-  <div id='app'>
-    <main className="bg-gray-800 w-screen h-full min-h-screen">
-      <Navbar links={[
-        { label: 'Home', href: '/' },
-        { label: 'Portfolio', href: '/portfolio' },
-        { label: 'Projects', href: '/projects' },
-      ]} />
-
-      <header className="flex flex-wrap flex-col overflow-hidden space-y-2 px-36 items-center justify-center h-screen w-screen">
-        <div className="my-3 px-3 w-full text-center">
-          <h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span className="text-blue-500">{GetTimeString()}</span>! I&apos;m <span className="text-purple-400">Jack Merrill</span>.</h1>
-        </div>
-        <div className="my-3 px-3 w-full text-center">
-          <h2 className="text-white font-bold md:text-4xl text-2xl">A Graphic and UI/UX Designer and Fullstack Developer from Chicago.</h2>
-        </div>
-        <div className="inline-flex items-center justify-center content-center space-x-4 my-3 px-3 w-full text-center">
-          <Link href="/portfolio">
-            <a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white">
-              See my Work
-            </a>
-          </Link>
-          <span className="text-sm font-light text-gray-400">or</span>
-          <Link href="mailto:me@jackmerrill.com">
-            <a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white">
-              Contact Me
-            </a>
-          </Link>
-        </div>
-      </header>
-    </main>
-  </div>
-)
-
 export default IndexPage

postcss.config.js

@@ -1,18 +1,6 @@
 module.exports = {
-  plugins: [
+  plugins: {
-    'tailwindcss',
+    tailwindcss: {},
-    process.env.NODE_ENV === 'production'
+    autoprefixer: {},
-      ? [
+  },
-        '@fullhuman/postcss-purgecss',
+}
-        {
-          content: [
-            './pages/**/*.{js,jsx,ts,tsx}',
-            './components/**/*.{js,jsx,ts,tsx}',
-          ],
-          defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
-        },
-      ]
-      : undefined,
-    'postcss-preset-env',
-  ],
-};

tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'media', // or 'media' or 'class'
   theme: {
     extend: {},