Adding backface-visibility?

[Ratko-Solaja]

What do you think about adding backface-visibility property that would function just like the visibility:

.backface-visible {
  backface-visibility: visible;
}

.backface-invisible {
  backface-visibility: hidden;
}

[lucashfreitas]

up

[thomasnavarro]

Hi!
Add this to tailwind.config.js and use <div class="backface-hidden"></div>

const plugin = require('tailwindcss/plugin')

const backfaceVisibility = plugin(function({addUtilities}) {
  addUtilities({
    '.backface-visible': {
      'backface-visibility': 'visible',
    },
    '.backface-hidden': {
      'backface-visibility': 'hidden',
    }
  })
});

module.exports = {
  plugins: [backfaceVisibility]
}

[mohsin]

Ideally, you'd want to target older browser versions like this:

const backfaceVisibility = plugin(function({addUtilities}) {
  addUtilities({
    '.backface-visible': {
      'backface-visibility': 'visible',
      '-moz-backface-visibility': 'visible',
      '-webkit-backface-visibility': 'visible',
      '-ms-backface-visibility': 'visible'
    },
    '.backface-hidden': {
      'backface-visibility': 'hidden',
      '-moz-backface-visibility': 'hidden',
      '-webkit-backface-visibility': 'hidden',
      '-ms-backface-visibility': 'hidden'
    }
  })
});

[mybearworld]

Shouldn't autoprefixer do this for you?

[max-sym]

Is this going to be implemented? Pretty relevant, I use it a lot in places that have opacity + transform animations to make it smooth.

[power-f-GOD]

Same here.

[CRIMSON-CORP]

I hope this get implemented soon, it really is a good utility to add

[podrivo]

I was trying to use it for a css flip animation. I hope this gets implemented! 🤞
@thomasnavarro @mohsin Thank you for the solution! 🙌

[Milkywayrules]

anyone knows the update? or it is won't be implemented? didn't find any official statement from the Tailwind Team itself and this discussion is pretty dead? _

[podrivo]

@Milkywayrules I would just use an alternative solution presented above.
You can also join the conversation on this PR: #10982

[GG-TOF]

Up