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)

Answer 1

Just an update for anyone who comes in here: As of Tailwind CSS version 3, they've updated the way opacity classes work in the new version. The older syntax bg-opacity-75 is now replaced with a new syntax, and the value is applied directly to the color class itself.

The new syntax appends the opacity value to the color, separated by a slash /. For example, bg-gray-800 with bg-opacity-75 would look like this in the version 3 and up of Tailwind CSS:

className={"bg-gray-50/75 h-full max-w-md rounded-2xl shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>