Tailwind css opacity

V

7

6

In my app I've a model. I'm using opacity on a model. The problem that I have now is that the body of the model should not have opacity how could I fix this? Only outside the model should have opacity!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="flex flex-col bg-red min-h-screen">
    <div class="fixed w-full h-full bg-blue opacity-50 flex items-center justify-center flex-col">
    <div class="bg-black p-16">
      <p class="text-white">Model body</p>
    </div>  
  </div>
  </div>
</body>
</html>

Viosterol answered 15/9, 2018 at 16:18 Comment(0)

T

20

I know it's been almost three years, and I'm not sure if this is what you want in your situation. But using bg-opacity-{n} instead of opacity-{n} did the trick for me.

I wanted to display an overlay element with kind of blackish background, but the overlay element itself should have 100% opacity.

Example code:

<div className="p-20 border-4 border-black fixed top-0 left-0 bottom-0 right-0 w-full h-screen bg-black bg-opacity-75">
    <div className="bg-white bg-opacity-100">
        Sample Text
    </div>
</div>

Posting this in case anyone else needs a solution like this.

TL;DR - use bg-opacity-75 in parent div, and bg-opacity-100 in child div. Using opacity-75 and opacity-100 doesn't work for some reason.

Tandi answered 8/8, 2021 at 8:14 Comment(0)

P

5

Checkout 'Changing the opacity' for background color with Tailwind: https://tailwindcss.com/docs/background-color#changing-the-opacity

For example in this example 'bg-sky-500' will have an opacity of 50:

<button class="bg-sky-500/50 ..."></button>

Pithy answered 1/8, 2022 at 12:4 Comment(0)

U

1

You could add .opacity-100 to the nested div.

Check the Official Tailwind Documentation about Opacity for further details.

Unfrock answered 15/9, 2018 at 16:26 Comment(3)

Thanks, but then all opacity is gone. Only the opacity on the model body should go away. – Viosterol 15/9, 2018 at 16:40

Did you add the class to the p element? – Unfrock 16/9, 2018 at 17:2

I have the same issue. Adding opacity-100 to the nested div does not change anything. – Doubtful 6/1, 2020 at 8:13

I

1

When you apply opacity to a container, all its content and children will inherit the opacity. You can see this question on Stackoverflow: Allow opacity on container but not child elements

The solution is to apply opacity value to background-color. In tailwind you can do it with bg-blue-{opacity} like bg-blue-100

Inerrable answered 2/7, 2022 at 8:12 Comment(0)

M

1

As of tailwind 3.3 the most the upvoted answer ie by @m01010011 in 2021 did not work for me, but @florestan-korp's 2022 answer is working for me.

ie bg-primary-blue/50 is working but bg-opacity-50 is not working. I dont have any nesting, just a plain old button:

<button className='g-primary-blue/50' disabled={props.isButtonDisabled}> Buttonname </button>

For nested div that answer may still be fine.

Motor answered 7/10, 2023 at 11:46 Comment(0)

F

0

You need to play around with relative/absolute, opacity and z-index

Here's a jsfiddle working example.

new Vue({
  el: "#app",
  data: function () {
     return {
        modalOpen: false
     }
  }
})

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app" class="relative">
  <div class="h-screen w-full p-4">
    <span class="rounded p-2 bg-gray-200 cursor-pointer" @click="modalOpen = true;">
      Open Modal
    </span>
  </div>

  <div v-if="modalOpen" class="absolute bg-black opacity-25 inset-0 z-10" @click="modalOpen = false;"></div>

  <div class="absolute inset-0 flex justify-center items-center" v-if="modalOpen">
    <div class="bg-white p-8 z-20">
      Modal
    </div>
  </div>

</div>

Fielding answered 26/5, 2020 at 3:53 Comment(0)

D

0

Assigning bg-opacity-40 to the outer div solved it for me

Dilapidation answered 30/3, 2021 at 8:46 Comment(0)

Recommended topics

Hot tags