src/docs/skew.mdx
import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
export const title = "skew"; export const description = "Utilities for skewing elements with transform.";
<ApiTable rows={[ ["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>);"], ]} />
Use skew-<number> utilities like skew-4 and skew-10 to skew an element on both axes:
</div>
<div className="relative z-10 skew-3">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-6</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 skew-6">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-12</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 skew-12">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:skew-3,skew-6,skew-12] -->
Use -skew-<number> utilities like -skew-4 and -skew-10 to skew an element on both axes:
</div>
<div className="relative z-10 -skew-3">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-skew-6</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 -skew-6">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-skew-12</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 -skew-12">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:-skew-3,-skew-6,-skew-12] -->
Use skew-x-<number> utilities like skew-x-4 and -skew-x-10 to skew an element on the x-axis:
</div>
<div className="relative z-10 -skew-x-12">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-x-6</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 skew-x-6">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-x-12</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 skew-x-12">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:-skew-x-12,skew-x-12,skew-x-6] -->
Use skew-y-<number> utilities like skew-y-4 and -skew-y-10 to skew an element on the y-axis:
</div>
<div className="relative z-10 -skew-y-12">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-y-6</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 skew-y-6">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-y-12</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 skew-y-12">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:-skew-y-12,skew-y-12,skew-y-6] -->
<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="skew" value="3.142rad" />
<ResponsiveDesign element="img" elementAttributes={{ src: "/img/mountains.jpg" }} properties={["skewX()", "skewY()"]} defaultClass="skew-3" featuredClass="skew-12" />