Add utilities to flip an element

[pryley]

For example:

/* Flip on the X axis */
.flip-horizontal {
    --transform-scale-x: -1;
}

/* Flip on the Y axis */
.flip-vertical {
    --transform-scale-y: -1;
}

<div class="flip-vertical transform">This is flipped vertically</div>

[adamwathan]

You can actually do this already by adding -1 to your scale scale (heh) in your config file:

module.exports = {
  theme: {
    extend: {
      scale: {
        '-1': '-1'
      }
    }
  }
}

[basepack]

Unfortunately this would not flip SVG's. It produces this code:

--tw-scale-x: -1;
--tw-scale-y: -1;

Where we need a transform: scale(-1,1) to get a SVG flipped horizontally.

[pryley]

I've been doing this (the utility names are more verbose):

plugin(function({ addUtilities, theme, variants }) {
  const newUtilities = {
    '.flip-horizontal': {
      '--transform-scale-x': '-1',
    },
    '.flip-vertical': {
      '--transform-scale-y': '-1',
    },
  }
  addUtilities(newUtilities, variants('flip'))
})

[pryley]

You can close this if you feel it's unnecessary, but I think it would be nice to have explicitly-named utilities for flipping elements; --transform-scale-{AXIS}: -1 isn't immediately obvious what it does unless you already know.

[jesperp]

I was a bit surprised you couldn't flip using Tailwind, not even through overriding! Overriding scale wont work, it flips both x and y axis!

So a flip-x and flip-y would be awesome!

[pryley]

@jesperp Using the example @adamwathan provided above, you should be able to do this: -scale-x-1 and -scale-y-1

[jesperp]

Ah, didn't see that, makes complete sense! Thanks

[SjorsO]

With JIT, you can use scale-x-[-1] to flip an element horizontally

[fabswt]

Or just -scale-x-100.

[windyclory]

My solution:

scale: {
  flip: '-1',
},

Classes: scale-x-flip and scale-y-flip

[leo]

This works great. Thank you!

[alikasmou]

-scale-y-100 -rotate-180

[erlandsona]

Any thoughts on how to translate this to v4?