Tailwind bg opacity

Question

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?

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, Nov 06 '21 at 11:34

score 7 · Accepted Answer · answered Nov 05 '21 at 16:25

7

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)

answered Nov 05 '21 at 16:25

Jax-p

7,225
4
28
58

Do you the pros of this approach rather than not setting `--tw-bg-opacity` in `.bg-black` and using a default value in `background-color`, cause that would make the css not dependant on the declaration order – Oli Crt Jan 19 '23 at 12:07

score 2 · Answer 2 · answered Nov 07 '22 at 14:06

2

See Here in the tailwind docs. The second number indicates the opacity.

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

answered Nov 07 '22 at 14:06

Joeboulton

138
8

Holy 0787, how could I miss that!! – Gogol Jan 22 '23 at 22:18

score 0 · Answer 3 · answered Jun 28 '23 at 05:38

0

For those who doesn't want to append to their tailwind.config.css:

<div className="bg-[rgb(255,0,0)]/50">

A common pitfall is putting spaces in between the commas or inside the brackets.

answered Jun 28 '23 at 05:38

mel3kings

8,857
3
60
68

score 0 · Answer 4 · answered Jul 20 '23 at 06:36

Documentation for adding the background opacity in Tailwind CSS version 3.3.3 is here. You simply have to state the color and then the opacity,

<button class="bg-sky-500/100 ..."></button>

and if you are using arbitrary values for opacity,

<div class="bg-sky-500/[.06] ..."></div>

I have ReactJS project with Tailwind v3.3.3 and adding the opacity according to the above mentioned way to extended colours didn't work for me and I did some digging and found the solution.

I added my colours to a file called colorPalette.js as shown below:

export const darkThemeColorPalette = {
  "--primary-50": "7, 28, 51", // RGB values of the color
  // Rest of the colours should be added here with the above format
};

Then in tailwind.config.js,

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "rgba(var(--primary-50))",
          // ADD THE REST OF THE COLORS HERE
        },  
      },
    },
  },
  plugins: [],
};

As you can see the colours are mentioned in rgba() format. If you haven't specified an opacity, by default this will consider 1 as opacity and when you have specified an opacity it will consider the mentioned value as the opacity.

Then I injected the colours to the root div as shown below:

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";

import { darkThemeColorPalette } from "./constants/common/colorPalette";
import Routes from "./Routes";

const App = () => (
  <div style={darkThemeColorPalette} className="">
    <Router>
      <Routes />
    </Router>
  </div>
);

export default App;

Hope this helps. Happy coding :D

Tailwind bg opacity

4 Answers4