Sometimes you find that an image you want to show would be better mirrored. To achieve this this you could of course adjust the image in a suitable software. But CSS is capable to do this on its own.

The Trick to flip an image horizontally or vertically is via scaling it. When you scale an image on the x axis by minus one (-1) you can flip it horizontally. If you do the same thing for the y axis it gets flipped vertically. Of course you can combine these two, if you want.

If you work with TailwindCSS like me, you know, that there is a scale method already available. But all available scaling values are positive. As such, you can't flip an image out of the box. But since TailwindCSS is customizable, you can add the missing negative scale option yourself. Just extend your tailwind.config.js file like in the following section.

theme: {
    extend: {
        scale: {
            '-100': '-1',
        }
    }
}

After compilation you can use this new scaling option in your code.

/* Flip horizontally */
<img src="..." alt="..." class="transform -scale-x-100">

/* Flip vertically */
<img src="..." alt="..." class="transform -scale-y-100">

/* Flip both */
<img src="..." alt="..." class="transform -scale-100">

This is not limited to images. You can use it on other elements like svg, paragraphs and others, too. Note however that this is only possible when you can are not using the CDN version of TailwindCSS, as there is no configuration option available.