Ask questionsDisabling textOpacity/backgroundOpacity should remove the variables similar to tailwind's output

In Tailwind, disabling the text and background opacity would remove the variables but this is not the 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).

Originally posted by @cybervaldez in


Answer questions cybervaldez

I'm keen on hearing your thoughts on the overhead. Are you noticing poor animation performance because of the css variable?

It does since many of the animation libraries(I'm using framer motion) goes through each property every animation frame. Those extra props also makes debugging very unwieldy when there's a lot of animation going on. Also the issues the variables bring with IE11 as @r0skar as pointed out

But ultimately, we should be expecting the same output similar to that of tailwind.css

Github User Rank List