Search code examples
cssbackgroundopacitytailwind-csstailwind-ui

Tailwind bg opacity

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?

Solution

  • 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)