config tailwind

app/globals.css

@@ -1,3 +1,17 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter); 
+  --font-serif: var(--font-playfair);
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

app/layout.tsx

@@ -3,7 +3,7 @@ import { Playfair_Display, Inter } from "next/font/google";
 import "./globals.css";
 
 const playfairDisplay = Playfair_Display({
-  variable: "--font-playfai-display",
+  variable: "--font-playfair",
   subsets: ["latin"],
 });
 

app/page.tsx

@@ -1,6 +1,6 @@
 export default function Home() {
   return (
-    <main className="min-h-screen bg-[#F5F4F0] text-black">
+    <main className="min-h-screen bg-beige text-black">
       <h1>Hello World</h1>
     </main>
   );