CODEWITHSUNDEEP
csstailwind-cssopacity
challet
challet

Reputation: 972

Tailwind opacified color doesn't render the same on the background and the border

Using the Tailwind color purple-600/50 on both the background and the border of an element, they don't render the same color. It's like the opacity is not the same (tested on Firefox and Safari). See https://play.tailwindcss.com/KrjtSAezXQ.

<img src="/img/logo.svg" class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full" />

background-color: rgba(147, 51, 234, 0.5);
border-color: rgba(147, 51, 234, 0.5);

<img src="/img/logo.svg" class="h-6 bg-purple-600 border-purple-600 border-4 rounded-full" />

What am I missing ?

Upvotes: 0

Views: 36

Answers (1)

Wongjn
Wongjn

Reputation: 23823

By default, the border gets drawn on top of the the background. Thus, the border color gets overlaid on to the background color, hence the difference in color.

If you want the same color in both situations you could consider:

  • Using background-clip: padding-box via the bg-clip-padding class to stop the background color being drawn underneath the border:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<img src="https://play.tailwindcss.com/img/logo.svg" class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full bg-clip-padding" />

  • Emulating the border with padding around the image:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<img src="https://play.tailwindcss.com/img/logo.svg" class="h-6 bg-purple-600/50 p-[4px] rounded-full" />

Upvotes: 2

Related Questions