Tailwind css backdrop-blur is not working children until i removed backdrop-blur from parent component

What version of Tailwind CSS are you using?

$ npm tailwind --version
v10.7.0

What build tool (or framework if it abstracts the build tool) are you using?

"gatsby": "^5.2.0",

What version of Node.js are you using?

v20.14.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Describe your issue

The problem i'm getting here is that tailwind css backdrop blur is not working in the nested element. I have an header component and applied background blur it works fine. But it doesn't work in one of my nested component.

Here is the code :

import React from "react";
import { Link, useI18next, useTranslation } from "gatsby-plugin-react-i18next";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu";
import { CaretDown, Translate } from "@phosphor-icons/react";
import { Button } from "../components/ui/button";

const Navbar = () => {
  const { t } = useTranslation();
  const { languages, language } = useI18next();

  function getLanguageForFullResources() {
    return language;
  }
  return (
    <header className="sticky top-0 z-20 border-b border-transparent bg-[#FCFCFC] bg-opacity-25 backdrop-blur-lg backdrop-filter transition-opacity duration-200 ease-in-out mx-auto h-20 flex items-center justify-between px-5 sm:px-0">
      <NavigationMenu className="flex justify-between items-center w-full max-w-7xl mx-auto">
        <Link to="/" title={t("ChatLab - Custom ChatGPT for your website")}>
          <img
            src="/staticimg/logo-new/logo_landscape_black_transparent_background.png"
            className="w-[120px] sm:w-[150px]"
            alt="ChatLab"
            title={t("ChatLab - Custom ChatGPT for your website")}
          />
        </Link>
        <ul className="flex bg-[#F9F9F9] bg-opacity-50 backdrop-blur-sm gap-5 py-3 items-center justify-center px-4 border-[#D9D9D9] border rounded-full text-base text-[#636363] mx-auto">
          <li className="hover:text-[#1F1F1F] cursor-pointer">{t("Home")}</li>
          <li className="hover:text-[#1F1F1F] cursor-pointer">Demo</li>
          <li className="hover:text-[#1F1F1F] cursor-pointer">Feature</li>
          <li className="hover:text-[#1F1F1F] cursor-pointer">Faq</li>
          <li className="hover:text-[#1F1F1F] cursor-pointer">Pricing</li>
          <li className="hover:text-[#1F1F1F] cursor-pointer">Contact</li>
        </ul>
        <NavigationMenuList className="flex items-center justify-center gap-5">
          <NavigationMenuItem>
            <NavigationMenuTrigger className="flex items-center gap-1 text-[#636363] hover:text-black transition-all cursor-pointer">
              <Translate size={28} />
              <CaretDown size={18} />
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="flex flex-col gap-5 backdrop-filter bg-[#F9F9F9] bg-opacity-50 backdrop-blur-3xl  relative border border-[#bbbbbb] rounded-xl p-3 w-[180px] left-5"> {/* The problem is here: backdrop-blur is not working untill i removed backdrop-blur from header  */}
                {languages.map((lang) => {
                  return (
                    <li
                      key={lang}
                      className={
                        getLanguageForFullResources() === lang
                          ? ""
                          : "grayscale-[70%] hover:grayscale-0 transition-all "
                      }
                    >
                      <a
                        href="#"
                        className="flex items-center gap-5"
                        onClick={(e) => {
                          e.preventDefault();
                          let newAddress = "/" + (lang === "en" ? "" : lang);
                          window.location = newAddress;
                        }}
                      >
                        <img
                          src={"/staticimg/flags/" + lang + ".png"}
                          alt={lang}
                          className="toplang-flag"
                        />
                        {lang}
                      </a>
                    </li>
                  );
                })}
              </ul>

              {/* <div className="pPanel">
                                        <ul className="inner">
                                            {languages.map(lang => {
                                                return <li key={lang} className={"toplang-item" + (getLanguageForFullResources() === lang ? " active" : "")}>
                                                    <a href="#" onClick={(e) => {
                                                        e.preventDefault();
                                                        let newAddress = "/" + (lang === "en" ? "" : lang);
                                                        window.location = newAddress;
                                                    }}>
                                                        <img src={"/staticimg/flags/" + lang + ".png"} alt={lang} className="toplang-flag"/>{lang}
                                                    </a>
                                                </li>
                                            })}

                                        </ul>
                                    </div> */}
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem className="text-[#636363] hover:text-black transition-all cursor-pointer">
            <a
              className="hover:text-[#636363]"
              href="https://app.chatlab.com/#/login"
            >
              Login
            </a>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <Button className="text-white hover:text-[#a1a1a1] transition-all cursor-pointer bg-[#2E2E2E] hover:bg-black px-8 py-7 rounded-2xl">
              Signup
            </Button>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </header>
  );
};

export default Navbar;

The main problem is in this code: <ul className="flex flex-col gap-5 backdrop-filter bg-[#F9F9F9] bg-opacity-50 backdrop-blur-3xl relative border border-[#bbbbbb] rounded-xl p-3 w-[180px] left-5"> {/* The problem is here: backdrop-blur is not working untill i removed backdrop-blur from header */}

Let me know, if you want to know more info

tailwindlabs / tailwindcss

Tailwind css backdrop-blur is not working children until i removed backdrop-blur from parent component #15098