Tailwindcss: [Feature Request] Background Opacity

[ezp127]

Hi!
I don't know how complex would be to accomplish this but having the ability to make a background semi-transparent would bring great design possibilities.
Currently if we apply opacity to a div, all inside contend are affected, as expected, but with background transparency this behavior can be skiped.

The usage would be like:

<div class="bg-red-500 bg-transparency-50">

or

<div class="bg-red-500 bg-opacity-50">

or even

<div class="bg-red-500-50">
<div class="bg-red-500-75">

What you guys think?

[SimonJ]

I think it's a good idea to have. if you have an image inside a div and you want to add a nice color on top of it, then I think it would be nice to have

[adamwathan]

You can do this by adding those colors to your config file:

https://tailwindcss.com/docs/customizing-colors/#extending-the-default-palette

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'bg-red-500-50': 'rgba(245, 101, 101, 0.5)',
      }
    }
  }
}

No plans to add these colors by default right now but again Tailwind is designed to be customized and this is an easy customization 👍🏻

[hacknug]

@ezp127 you can use my PR for tailwindcss-alpha which will generate alpha classes for different core plugins (or custom ones): https://github.com/bradlc/tailwindcss-alpha/pull/7

Will be updating that to add colors to your config file once v1.2 or v2.0 are released 👍