TailwindCSS bg-opacity not working in React

Viewed 4103

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)

1 Answers

Opacity

Use opacity Keyword only, for version 2.2.7 Tails wind

example:

<div
className = "opacity-75 bg-red-300">
</div>
Related