The opacity of a Tailwind color appears differently when applied to the background versus the border

When applying the Tailwind color purple-600/50 to both the background and border of an element, they appear as different colors. It seems like the opacity is not consistent across browsers (tested on Firefox and Safari). View it in action here.

<img src="/img/logo.svg" class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full" />
  • Despite inspecting the css reveals identical rules:
background-color: rgba(147, 51, 234, 0.5);
border-color: rgba(147, 51, 234, 0.5);
  • The image itself does not seem to inherently have a background opacity issue, or else the same discrepancy would occur without any css opacity applied:
<img src="/img/logo.svg" class="h-6 bg-purple-600 border-purple-600 border-4 rounded-full" />

What could be causing this inconsistency?

csstailwind-cssopacity

Answer №1

Typically, the border is displayed on top of the background color, causing the border color to overlap with the background color and creating a visible contrast.

To achieve uniformity in color in both scenarios, you may consider:

  • Applying background-clip: padding-box using the bg-clip-padding class to prevent the background color from appearing beneath 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" />

  • Simulating the border effect by adding 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" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Using Bootstrap's toast feature repositions every element on the

I am working on a website project and encountering an issue with a bootstrap toast. The toast currently appears in the top right corner, but I would like it to display above the carousel without affecting the layout. Instead, when the toast appears, it shi ...

javascripthtmlcssbootstrap-4

Ensure that the table is padded while keeping the cells collapsed

I am currently working on creating a table with borders between each row. However, I am facing an issue where the row borders are touching the outer border of the table. Despite my efforts, I have been unable to find a solution to this problem. I feel like ...

htmlcssbordercss-tablesspacing

CSS - spacing anomaly among inline-block items

I am facing a strange issue with the arrangement of elements in my container div. I have set them to display: inline-block, and they are supposed to expand horizontally if the contents exceed the device width. However, there is an unexpected margin between ...

csshtml

What is the best way to show an image behind text as a background?

I'm seeking a way to have text displayed over an image without the need to create a new image every time the text changes. Currently, I achieve this using Photoshop, but it requires manual updates each time the text is modified. I am looking for a sol ...

jqueryhtmlcss

What is the proper method for storing user registration information in the database so that it can be easily retrieved and accessed later? (Error message)

User.cs: An error is occurring in the User class where 'User' is not a valid type in the context of TestBlazor project. It happened when attempting to save user registration data. using System; using System.Collections.Generic; using S ...

c#htmlcssblazor

Using a CSS nth-child selector to eliminate the bottom margin of the final row

As I work on creating lists that are displayed in columns of two, each .customer-review-container includes a margin-bottom CSS property like this: <div class="col-md-6"> <div class="customer-review-container"> </div> <!-- en ...

htmlcssmargincss-selectors

Error in the code that I am unable to locate in JavaScript, HTML, and CSS

I need help creating a navbar that displays the active site using HTML and JS code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=& ...

javascripthtmljquerycss

Tips for applying a linear gradient mask to div elements?

I'm attempting to create a fading effect on the edges of a div by using two overlay divs positioned absolutely on either side. My goal is to have the background of the page visible once the fade is complete, effectively masking the content of one div ...

htmlcssmasking

Troubleshooting z-index problem with background image and parent tag of image

I seem to be facing an issue with the z-index property. Here is the code snippet in question: <div id="sidebarCont"> <div id="avatarCont" class="mask"> <img id="" class="" src="img.jpg" alt=""/> </div> And here is the correspo ...

css

Guide on implementing page styles to a polymer element

To apply styles from a 'normal' stylesheet to my polymer component, I included shim-shadowdom in the style and added /deep/ to the class. Here is an example: <html> <head> <style shim-shadowdom> .mylink /deep/ {col ...

htmlcsspolymer

Four-pointed star design with rounded edges

https://i.sstatic.net/E3ZFb.png My goal is to create a pixel-perfect star using CSS. I have attempted to achieve this so far, but the star currently has 5 points and I would like it to only have 4 points. Additionally, I am looking for a way to make the c ...

htmlcsssvgcss-shapes

Stable height with Internet Explorer 6

According to information found on davidwalsh, it is mentioned that in IE6, the container will continue to expand vertically even when a specific height is set. How can I establish a max-height in IE6 so that the container expands with its content until r ...

htmlcssinternet-explorer-6scrollbar

The Angular Material md-input-container consumes a significant amount of space

Currently, I am exploring a sample in Angular Material. It appears that the md-input-container tag is taking up a substantial amount of space by default. The output is shown below: https://i.sstatic.net/hQgpT.png However, I have come across the md-input- ...

javascriptcssangularjshtmlangular-material

How can I incorporate custom text when hovering over dates on fullcalendar?

I'm looking to customize the mouseover text inside fullcalendar. Currently, the script only displays the event title on mouseover. You can see a working example here: JS Fiddle Example. How can I modify the code to show my own personalized text on mo ...

javascriptjquerycssfullcalendarmouseover

Problem with resizing in CSS and jQuery

I need help creating a chatbox that can be resized. I've almost got it, but the bottom part of the chatbox detaches when I resize it. Also, I'm having trouble making the userList a fixed size that won't be affected by resizing. Check out th ...

javascriptjquerycss

Guide: Generating a DIV Element with DOM Instead of Using jQuery

Generate dynamic and user-defined positioning requires input parameters: offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth ...

javascripthtmlcssdom

Creating a visually appealing table in HTML or experimenting with a tableless design can greatly enhance your website's layout

Presenting data with headers in HTML has been a challenge for me. Below is the portion of the header I'm having difficulty with. Although I've successfully rotated the text, the issue I'm facing now is text overlap. Here's the code st ...

htmlcss

I'm having trouble getting vite-plugin-fonts to work. It doesn't seem to be doing anything

Hey there! I was trying to bring in a custom font with vite and came across this handy plugin called vite-plugin-fonts. I set it up like this: import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import * as pa ...

cssreactjs

Are your divs getting truncated?

Currently faced with a perplexing issue where inserting elements into a div causes scaling problems, resulting in most of the divs being cut off. This glitch occurs when two new elements are added. Despite changing page sizes and thoroughly debugging by o ...

javascripthtmlcss

What is the most efficient method for line wrapping in the react className attribute while utilizing Tailwind CSS with minimal impact on performance?

Is there a more efficient way to structure the className attribute when utilizing tailwind css? Which of the examples provided would have the least impact on performance? If I were to use an array for the classes and then join them together as shown in e ...

reactjstypescripttailwind-css