Tailwind bg opacity

user_12913776 0
Viewed 2950

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?

tailwind-ui tailwind-css opacity background css
1 Answers

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)
user_55970170
Related