Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

skew

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
skew-<number> transform: skewX(<number>deg) skewY(<number>deg);
-skew-<number> transform: skewX(-<number>deg) skewY(-<number>deg);
skew-(<custom-property>) transform: skewX(var(<custom-property>)) skewY(var(<custom-property>));
skew-[<value>] transform: skewX(<value>) skewY(<value>);
skew-x-<number> transform: skewX(<number>deg));
-skew-x-<number> transform: skewX(-<number>deg));
skew-x-(<custom-property>) transform: skewX(var(<custom-property>));
skew-x-[<value>] transform: skewX(<value>));
skew-y-<number> transform: skewY(<number>deg);
-skew-y-<number> transform: skewY(-<number>deg);
skew-y-(<custom-property>) transform: skewY(var(<custom-property>));
skew-y-[<value>] transform: skewY(<value>);

Examples#

Basic example#

Use skew-<number> utilities like skew-4 and skew-10 to skew an element on both axes:

{

skew-3

skew-6

skew-12

}

<!-- [!code classes:skew-3,skew-6,skew-12] -->
<img class="skew-3 ..." src="/img/mountains.jpg" />
<img class="skew-6 ..." src="/img/mountains.jpg" />
<img class="skew-12 ..." src="/img/mountains.jpg" />

Using negative values#

Use -skew-<number> utilities like -skew-4 and -skew-10 to skew an element on both axes:

{

-skew-3

-skew-6

-skew-12

}

<!-- [!code classes:-skew-3,-skew-6,-skew-12] -->
<img class="-skew-3 ..." src="/img/mountains.jpg" />
<img class="-skew-6 ..." src="/img/mountains.jpg" />
<img class="-skew-12 ..." src="/img/mountains.jpg" />

Skewing on the x-axis#

Use skew-x-<number> utilities like skew-x-4 and -skew-x-10 to skew an element on the x-axis:

{

-skew-x-12

skew-x-6

skew-x-12

}

<!-- [!code classes:-skew-x-12,skew-x-12,skew-x-6] -->
<img class="-skew-x-12 ..." src="/img/mountains.jpg" />
<img class="skew-x-6 ..." src="/img/mountains.jpg" />
<img class="skew-x-12 ..." src="/img/mountains.jpg" />

Skewing on the y-axis#

Use skew-y-<number> utilities like skew-y-4 and -skew-y-10 to skew an element on the y-axis:

{

-skew-y-12

skew-y-6

skew-y-12

}

<!-- [!code classes:-skew-y-12,skew-y-12,skew-y-6] -->
<img class="-skew-y-12 ..." src="/img/mountains.jpg" />
<img class="skew-y-6 ..." src="/img/mountains.jpg" />
<img class="skew-y-12 ..." src="/img/mountains.jpg" />

Using a custom value#

Responsive design#