tailwind css - TailwindCSS bg-opacity not working in React

Question

I am trying to set my Login section's background opacity using bg-opacity-75, but when I add that to my className, background color will just disappear. And if I use opacity-75, all child-div will be transparent as it should, if I use opacity-100, background color will just disappear and only input field is visible, it's kinda wired. In addition, I'm using default tailwind.config file with tailwind v2.0.2.

Here's my code:

...
        <div className={"h-screen w-screen py-10 lg:w-3/6"}>
            <div
                className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
                <Logo/>
                <Text/>
...

I aslo tried inline css, still not working. using bg-opacity-75(there sholld be a white transparent area behind inputs)

question from:https://stackoverflow.com/questions/66056672/tailwindcss-bg-opacity-not-working-in-react

Answer 1

Waitting for answers