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

[Maybach91]

For svg this is not working for me. The following worked for me tho for svg in Tailwind 3.4.17:
-scale-x-100 !scale-y-100

[erlandsona]

Any thoughts on how to translate this to v4?

[rozsazoltan]

Yeah, just use @utility directive:

• https://play.tailwindcss.com/9WTF5WWAPg?file=css (I do not recommend it)

@utility flip-horizontal {
  scale: -100% 1;
}
@utility flip-vertical {
  scale: 1 -100%;
}

<div class="transform flip-horizontal">
  Hello World
</div>

<div class="transform flip-vertical">
  Hello World
</div>

But I wouldn't create a new flip-* utility just for this, because IntelliSense won't be able to associate it with scale-*. As a result, using flip-horizontal together with scale-x-50 is a logical mistake, and you won't get any warning about it. I would use scale with -100 values instead:

• https://play.tailwindcss.com/SkCaEBV2JX (recommended)

<div class="transform -scale-x-100">
  Hello World Horizontal
</div>

<div class="transform -scale-y-100">
  Hello World Vertical
</div>

However, you can extend scale-* with custom names, so you can add horizontal and vertical as well. Unfortunately, in the case of scale, you need the -x, -y, or -z prefix so it knows which axis you want the custom name to apply to. Because of that, I would only define the -100% value under a custom name like full, so scale-x-full would be the horizontal flip, and scale-y-full would be the vertical one.

• https://play.tailwindcss.com/udhDj2HaBg?file=css (recommended)

@theme {
  --scale-full: -100%;
}

<div class="transform scale-x-full">
  Hello World Horizontal
</div>

<div class="transform scale-y-full">
  Hello World Vertical
</div>

Or you can generate names without the -x and -y parts by duplicating code, but unfortunately this requires fully duplicating the entire scale configuration.

• https://play.tailwindcss.com/GC2OpfhBUt?file=css

@utility scale-horizontal {
  scale: -100% 1;
}
@utility scale-vertical {
  scale: 1 -100%;
}

<div class="transform scale-horizontal">
  Hello World
</div>

<div class="transform scale-vertical">
  Hello World
</div>

[michael-stout-ai]

How do I unsubscribe?

…

On Wed, Nov 19, 2025 at 9:33 AM Patrick Ludewig ***@***.***> wrote: For svg this is not working for me. The following worked for me tho for svg in Tailwind 3.4.17: -scale-x-100 !scale-y-100 — Reply to this email directly, view it on GitHub <#2146 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BS4ZOIO2QSRUJCVA4W6VV6D35Q2NRAVCNFSM6AAAAAB7OJEZOWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMBRGEYDCMA> . You are receiving this because you are subscribed to this thread.Message ID: <tailwindlabs/tailwindcss/repo-discussions/2146/comments/15011010@ github.com>