I was curious about the CSS behind tailwinds bg opacity. I could only find 'opacity' in pure CSS but that affects everything rather than just the background. Could somebody please explain this?
Tailwinds background opacity affects variable which is used in color parameter. Tailwind uses rgba(red, green, blue, opacity)
where the last parameter is color opacity.
For example .bg-black
looks like this:
.bg-black {
--tw-bg-opacity: 1;
background-color: rgba(0,0,0,var(--tw-bg-opacity));
}
and bg-opacity-50
looks like this:
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
it overloads --tw-bg-opacity
variable and results into the:
background-color: rgba(0,0,0,0.5)