How not to give parent's css to child tag in NextJs and TailWindCSS

Question

I have the following code:

<div className="py-8 bg-black opacity-50">
    <p className="text-white text-6xl text-center z-2 opacity-100">
        Our Promise
    </p>
</div>

I don't want to opacity in effect on the

.

As you see, I gave z-index and opacity to

but nothing changes.

Answer 1

When you use opacity-50 You don't reduce the opacity of the color but reduce the opacity of the element (with all children).

What you're asking about is bg-black/50