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

[Fardeen-Awais]

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

[philipp-spiess]

@Fardeen-Awais Hey there! I converted your repro to a Tailwind Play: https://play.tailwindcss.com/whusdyv2bE

When i remove the backdrop-blur-sm it does look different so this does appear to work both in v3 and v4. Can you clarify what the problem is? Going to close this as a can't repro for now as it's clearly working for me but happy to reopen.

[Fardeen-Awais]

@philipp-spiess The problem is not that backdrop-blur is not working. It works but it doesn't work in the children component.

As you can see here. The language selector component is not getting blurred even if i add backdrop-blur. It doesn't work untill i removed the backdrop blur from header

Let me show you the video. i can't be able to blur the background of language dropdown untill i removed the backdrop-blur from header.

Here is the video:

Uploading bug.mp4…

[Fardeen-Awais]

bug.mp4

[philipp-spiess]

@Fardeen-Awais do you mind porting this repro to the play example so we can look into it? it's a bit hard to unclear to me what's going on in detail from the screenshot alone. You can use this as a starting point: https://play.tailwindcss.com/whusdyv2bE

[Fardeen-Awais]

I check that it is not related to my problem. Second the repo is in codecommit and I didn't have the access of my client repo. So I can give you the code.

[madmoizo]

It is not related to tailwind, nested filters don't work as expected
I did a repro some weeks ago to report the issue: https://codepen.io/frlinw/pen/KKOEXJp

[Fardeen-Awais]

I fix this problem by changing the shadcn component.

In Gatsby, I don't why I face this problem. Some tailwind classes aren't working as expected.