Next local font/Tailwind incompatibility with Safari
I'm really stuck on how to get past two issues with the site I'm making. Would deeply appreciate any help.
The first is my local font not rendering correctly on Safari.
I'm using Next local font to import it like so.
import localFont from "next/font/local";
const ppMori = localFont({ src: "../../src/assets/PPMori-Regular.otf" });
const MyApp: AppType = ({ Component, pageProps }) => {
return (
<main className={ppMori.className}>
My second issue is my hamburger menu which is using conditional Tailwind coloring to switch on modal opening via useState not changing colour on Safari. Probably could've gone about this a better way but this is what I came up with.
const genericHamburgerLineClosed = h-1 w-6 my-1 opacity transition ease transform duration-300;
const genericHamburgerLineOpen = h-1 w-6 my-1 opacity transition ease transform duration-300;
// ...
<div
style={{ backgroundColor: color }}
className={${genericHamburgerLineClosed} ${
modal
? "translate-y-3 rotate-45 opacity-100 group-hover:opacity-100"
: "group-hover:opacity-100"
}}
/>
<div
style={{ backgroundColor: color }}
className={${genericHamburgerLineClosed} ${
modal ? "opacity-0 group-hover:opacity-100" : "group-hover:opacity-100"
}}
/>
Let me know if any more informations needed.0 Replies