Classes setting colour set RGB value but not hex

Given a tailwind class to set a background colour like this:

.bg-off-black {
  --bg-opacity: 1;
  background-color: #131b20;
  background-color: rgba(19, 27, 32, var(--bg-opacity));
}

If I set it via: className='bg-off-black' I get an output of this: This is correct as hex and rgb are applied.

Using the tw='bg-off-black' or using it in a styled-component ${tw`bg-off-black`} prop

This mostly proves a problem for me setting up ie11 compatibility as the variables which set opacity are failing so that method isn’t working (not worked out why just yet), either way the hex values should still be applied I believe?

CodeSandbox example: https://codesandbox.io/s/busy-moser-yxl7g?file=/src/App.tsx

[kieran-osgood]

I seeeee, okay cool not to worry! Before I remove I’m gonna try adding css-vars-ponyfill and see if I can just set the --bg-opacity to 1 (doubt I’ll need the opacity set, and if I do I’m using styled-components so i can get around it). Otherwise I’m sure I’ll see you again when I get to my next project where I will hopefully not be forced to support ie11!

Keep up the good work and thanks for the help 😃

FWIW: to anyone else who might face this, the css-vars-ponyfill did successfully allow me to continue using twin (weigh up whether this makes a difference to you yourselves).

[cybervaldez]

In Tailwind, disabling the text and background opacity would remove the variables but this is not case for twin.macro.

// tailwind.css (original)
.bg-red-400 {
  --bg-opacity: 1;
  background-color: #fc8181;
  background-color: rgba(252, 129, 129, var(--bg-opacity));
}

// tailwind.config.js
  corePlugins: {
    textOpacity: false,
    backgroundOpacity: false,
  },

// tailwind.css (with above settings)
.bg-red-400 {
  background-color: #fc8181;
}

// twin.macro
console.log(tw`bg-red-400`) // { --bg-opacity: "1", backgroundColor: "rgba(252, 129, 129, var(--bg-opacity))"}

this is adding some unnecessary overhead, in my case i’m using twin.macro to animate object properties so I would prefer to only manipulate the background or color properties(as it should).