Tailwindcss: [Feature Proposal] RGBA Backgrounds

[smplyjr-dev]

0.5 from the below class might not be the best way to handle it, but this is what I figure out so far.

<div class="bg-rgba-000000/0.5">
  I have an rgba background.
</div>

00000 - color in hex
0.5 - opacity

Thanks.

Might be similar:
https://github.com/tailwindcss/tailwindcss/issues/342

[adamwathan]

Planning to implement this in a future version but in a composable way using CSS custom properties, so you could do something like:

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

Where those classes are defined something like:

.bg-red-500 {
  --background-color-opacity: 1;
  background-color: rgba(245,101,101, var(--background-color-opacity));
}

.bg-opacity-25 {
  --background-color-opacity: 0.25;
}

We'd support the same thing for text color and border color too 👍