fix(Header-DesktopNav): rectify frosted blur in production

See tailwindlabs/tailwindcss#7802.
sabertazimi · Apr 2, 2022 · 77d2249 · 77d2249
1 parent 078753f
commit 77d2249
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/Header/DesktopNav.tsx b/src/components/Header/DesktopNav.tsx
@@ -14,16 +14,16 @@ interface Props {
 
 const DesktopNav = ({ fixed, posts }: Props): JSX.Element => (
   <Menu
+    mode="horizontal"
     className={classNames(
       'fixed z-100 w-full font-extrabold bg-transparent border-transparent transition transform-gpu hidden md:visible md:flex',
       {
         'bg-gradient-primary': !fixed,
         'bg-white/30': fixed,
         'shadow-lg': fixed,
-        'backdrop-blur-sm': fixed,
+        'backdrop-blur-primary': fixed,
       }
     )}
-    mode="horizontal"
   >
     <Menu.Item
       key="home"

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -30,4 +30,8 @@
   .flex-container {
     @apply flex flex-row flex-wrap justify-center items-center content-center !important;
   }
+
+  .backdrop-blur-primary {
+    backdrop-filter: blur(4px) !important;
+  }
 }