Skew

Utility	Properties
t-sk-1	transform: skew(1deg);
t-sk-2	transform: skew(2deg);
t-sk-3	transform: skew(3deg);
t-sk-6	transform: skew(6deg);
t-sk-12	transform: skew(12deg);

This example showcases various skew transformations:

• The t-sk-3 utility skews the element by 3 degrees.
• The t-sk-6 utility skews the element by 6 degrees.
• The t-sk-12 utility skews the element by 12 degrees

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sk-3" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sk-6" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sk-12" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Skew X

This example showcases various skew transformations along the X-axis:

• The t-skx-3 utility skews the element by 3 degrees horizontally.
• The t-skx-6 utility skews the element by 6 degrees horizontally.
• The t-skx-12 utility skews the element by 12 degrees horizontally.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-skx-3" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-skx-6" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-skx-12" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Skew Y

This example showcases various skew transformations along the Y-axis:

• The t-sky-3 utility skews the element by 3 degrees vertically.
• The t-sky-6 utility skews the element by 6 degrees vertically.
• The t-sky-12 utility skews the element by 12 degrees vertically.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sky-3" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sky-6" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sky-12" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:t-sk-*,md:t-sk-*, lg:t-sk-*, and xxl:t-sk-* allows targeting specific utilities in different viewports.

<div class="t-sk-10 md:t-sk-20 ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:t-sk-* utility to override elements and change their values when hovering over them.

<div class="t-sk-10 h:t-sk-20 ..."></div>