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)

Copula

this seems to work.... play.tailwindcss.com/V3MIFuLzzj not quite sure if thats what you were doing? – Above

yes, but when I set bg-opacity-75, my colored background will disappear. – Copula

Are you using webpack ? If that's the case try to clear the webpack cache and it will work fine. I encounter this error/bug today. – Shahjahanpur

It will work, Please check your Webpack configuration and Tailwindcss version in package.json – Inception

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"}>

Strafe

checking this might be really useful, since tailwindcss version v3.4.7 you can define custom fonts and with the aid of special placeholder value called <alpha-value> you can apply opacity to your own custom define colours – Charade

Answer 2

I guess you are looking for something like this:

<div class="bg-green-400 h-32">
  <div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
    <div>Your Opacity child div here</div>  
  </div>
</div>

Levitical

Answer 3

Opacity

Use opacity Keyword only, for version 2.2.7 Tails wind

example:

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

Cheroot