fix(again): Fonts issue?

pages/index.tsx

@@ -1,19 +1,25 @@
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 import Navbar from '../components/Navbar'
 
-function GetTimeString() {
+const IndexPage = () => {
+  const [timeString, setTimeString] = useState('Morning')
+
+  useEffect(() => {
     const hours = new Date().getHours()
 
-  if (hours < 12) {
-    return 'Morning'
-  } else if (hours >= 12 && hours <= 17) {
-    return 'Afternoon'
-  } else if (hours >= 17 && hours <= 24) {
-    return 'Evening'
-  }
-}
+    console.log(new Date())
   
-const IndexPage = () => (
+    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={[
@@ -24,7 +30,7 @@ const IndexPage = () => (
 
         <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>
+            <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>
@@ -46,5 +52,6 @@ const IndexPage = () => (
       </main>
     </div>
   )
+}
 
 export default IndexPage

postcss.config.js

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