From 0b6ca41547242de19104dcbcac83c31d3b64ee74 Mon Sep 17 00:00:00 2001
From: kungpaogao <kungpaogao@gmail.com>
Date: Mon, 17 Feb 2025 23:45:51 -0500
Subject: [PATCH] Fix styling for tailwind v4

---
 prettier.config.ts => prettier.config.cjs | 0
 src/components/Navigation.tsx             | 2 +-
 src/styles/global.css                     | 2 ++
 tailwind.config.cjs                       | 8 ++++----
 4 files changed, 7 insertions(+), 5 deletions(-)
 rename prettier.config.ts => prettier.config.cjs (100%)

diff --git a/prettier.config.ts b/prettier.config.cjs
similarity index 100%
rename from prettier.config.ts
rename to prettier.config.cjs
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index ed04e30..7a8020f 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -163,7 +163,7 @@ const Navigation: Component<NavigationProps> = ({
       <div
         class={clsx(
           "absolute top-0 left-0 right-0 bottom-0 h-[100vh]",
-          "bg-black/0 backdrop-blur-sm",
+          "bg-black/0 backdrop-blur-xs",
           "transition-opacity",
           "hidden md:hidden",
           "peer-target:block peer-checked:block",
diff --git a/src/styles/global.css b/src/styles/global.css
index 4b0492a..0b50f68 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@config "../../tailwind.config.cjs";
 
 html {
   background-color: theme("colors.stone.100");
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ea9647f..c6084e5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -16,7 +16,7 @@ module.exports = {
       },
       // https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
       // https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js
-      typography: (theme) => ({
+      typography: ({theme}) => ({
         DEFAULT: {
           css: {
             p: {
@@ -42,7 +42,7 @@ module.exports = {
               margin: "6.5px 0px",
             },
             h1: {
-              fontFamily: theme("fontFamily.serif").join(","),
+              fontFamily: theme("fontFamily.serif"), //.join(","),
               fontSize: "1.875em",
               fontWeight: theme("fontWeight.medium"),
               lineHeight: headingLineHeight,
@@ -51,7 +51,7 @@ module.exports = {
               padding: textPadding,
             },
             h2: {
-              fontFamily: theme("fontFamily.serif").join(","),
+              fontFamily: theme("fontFamily.serif"), //.join(","),
               fontSize: "1.5em",
               fontWeight: theme("fontWeight.medium"),
               lineHeight: headingLineHeight,
@@ -60,7 +60,7 @@ module.exports = {
               padding: textPadding,
             },
             h3: {
-              fontFamily: theme("fontFamily.serif").join(","),
+              fontFamily: theme("fontFamily.serif"), //.join(","),
               fontSize: "1.25em",
               fontWeight: theme("fontWeight.medium"),
               lineHeight: headingLineHeight,