Tailwind css opacity

Question

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>

score 16 · Answer 1 · answered Aug 08 '21 at 08:14

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.

score 4 · Answer 2 · answered Aug 01 '22 at 12:04

4

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>

answered Aug 01 '22 at 12:04

Florestan Korp

662
2
12
24

score 1 · Answer 3 · edited Jan 22 '19 at 09:21

1

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

Check the Official Tailwind Documentation about Opacity for further details.

edited Jan 22 '19 at 09:21

Ced

1,293
5
23
34

answered Sep 15 '18 at 16:26

Sahar

66
4

Thanks, but then all opacity is gone. Only the opacity on the model body should go away. – Jamie Sep 15 '18 at 16:40
Did you add the class to the p element? – Sahar Sep 16 '18 at 17:02
I have the same issue. Adding opacity-100 to the nested div does not change anything. – Jan 06 '20 at 08:13

score 1 · Answer 4 · answered Jul 02 '22 at 08:12

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

score 0 · Answer 5 · answered May 26 '20 at 03:53

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>

score 0 · Answer 6 · answered Mar 30 '21 at 08:46

0

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

answered Mar 30 '21 at 08:46

MCH

986
13
19

Tailwind css opacity

6 Answers6