Contents
Quick reference
Class | Properties |
---|---|
.skew-x-0 | transform: skewX(0deg); |
.skew-x-1 | transform: skewX(1deg); |
.skew-x-2 | transform: skewX(2deg); |
.skew-x-3 | transform: skewX(3deg); |
.skew-x-6 | transform: skewX(6deg); |
.skew-x-12 | transform: skewX(12deg); |
.skew-y-0 | transform: skewY(0deg); |
.skew-y-1 | transform: skewY(1deg); |
.skew-y-2 | transform: skewY(2deg); |
.skew-y-3 | transform: skewY(3deg); |
.skew-y-6 | transform: skewY(6deg); |
.skew-y-12 | transform: skewY(12deg); |
Basic usage
Skewing an element
Use the skew-x-{amount}
and skew-y-{amount}
utilities to skew an element.
skew-y-0
skew-y-3
skew-y-6
skew-y-12
<img class="skew-y-0 ...">
<img class="skew-y-3 ...">
<img class="skew-y-6 ...">
<img class="skew-y-12 ...">
Using negative values
To use a negative skew value, prefix the class name with a dash to convert it to a negative value.
<img class="-skew-y-6 ...">
Removing transforms
To remove all of the transforms on an element at once, use the transform-none
utility:
<div class="scale-75 translate-x-4 skew-y-3 transform-none">
<!-- ... -->
</div>
Edit this page on Github
Last updated on April 6, 2024