Ask questionsClasses 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: image 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 image

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:


Answer questions 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).

Github User Rank List