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)

this seems to work.... https://play.tailwindcss.com/V3MIFuLzzj not quite sure if thats what you were doing? — Keith Nicholas, Feb 05 '21 at 03:20
yes, but when I set `bg-opacity-75`, my colored background will disappear. — Elshir Stan, Feb 06 '21 at 13:30
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. — CoderOO7, Mar 30 '21 at 15:18
It will work, Please check your Webpack configuration and Tailwindcss version in package.json — Kiran Raj R, Jul 12 '21 at 16:40

score 4 · Answer 1 · answered May 22 '23 at 08:04

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

score 0 · Answer 2 · answered Jan 16 '23 at 05:31

0

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>

answered Jan 16 '23 at 05:31

krishnaacharyaa

14,953
4
49
88

score -6 · Answer 3 · edited Aug 12 '21 at 14:32

-6

Opacity

Use opacity Keyword only, for version 2.2.7 Tails wind

example:

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

edited Aug 12 '21 at 14:32

General Grievance

4,555
31
31
45

answered Aug 11 '21 at 17:01

Ran Leibovitz

21
1
2

TailwindCSS bg-opacity not working in React

3 Answers3