Fix styling for tailwind v4

kungpaogao · Feb 18, 2025 · 0b6ca41 · 0b6ca41
1 parent fa122ac
commit 0b6ca41
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/prettier.config.ts → prettier.config.cjs b/prettier.config.ts → prettier.config.cjs
diff --git 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
@@ -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
@@ -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,