src/docs/scale.mdx
import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx";
export const title = "scale"; export const description = "Utilities for scaling elements.";
<ApiTable
rows={[
["scale-none", "scale: none;"],
...[["scale"]].flatMap(([prefix]) => [
[${prefix}-<number>, scale: <number>% <number>%;],
[-${prefix}-<number>, scale: calc(<number>% * -1) calc(<number>% * -1);],
[${prefix}-(<custom-property>), scale: var(<custom-property>) var(<custom-property>);],
[${prefix}-[<value>], scale: <value>;],
]),
...[
["scale-x", (value) => ${value} var(--tw-scale-y)],
["scale-y", (value) => var(--tw-scale-x) ${value}],
["scale-z", (value) => var(--tw-scale-x) var(--tw-scale-y) ${value}],
].flatMap(([prefix, getScale]) => [
[${prefix}-<number>, scale: ${getScale("<number>%")};],
[-${prefix}-<number>, scale: ${getScale("calc(<number>% * -1)")};],
[${prefix}-(<custom-property>), scale: ${getScale("var(<custom-property>)")};],
[${prefix}-[<value>], scale: ${getScale("<value>")};],
]),
["scale-3d", "scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);"],
]}
/>
Use scale-<number> utilities like scale-75 and scale-150 to scale an element by a percentage of its original size:
</div>
<div className="relative z-10 scale-75">
<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">scale-100</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 scale-100">
<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">scale-125</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 scale-125">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:scale-75,scale-100,scale-125] -->
Use the scale-x-<number> utilities like scale-x-75 and -scale-x-150 to scale an element on the x-axis by a percentage of its original width:
</div>
<div className="relative z-10 scale-x-75">
<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">scale-x-100</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 scale-x-100">
<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">scale-x-125</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 scale-x-125">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:scale-x-75,scale-x-100,scale-x-125] -->
Use the scale-y-<number> utilities like scale-y-75 and scale-y-150 to scale an element on the y-axis by a percentage of its original height:
</div>
<div className="relative z-10 scale-y-75">
<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">scale-y-100</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 scale-y-100">
<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">scale-y-125</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 scale-y-125">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:scale-y-75,scale-y-100,scale-y-125] -->
Use -scale-<number>, -scale-x-<number> or -scale-y-<number> utilities like -scale-x-75 and -scale-125 to mirror and scale down an element by a percentage of its original size:
</div>
<div className="relative z-10 -scale-x-75">
<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">-scale-100</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 -scale-100">
<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">
-scale-y-125
</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 -scale-y-125">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:-scale-x-75,-scale-100,-scale-y-125] -->
<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="scale" value="1.7" />
<TargetingSpecificStates element="img" elementAttributes={{ src: "/img/mountains.jpg" }} property="scale" defaultClass="scale-95" featuredClass="scale-120" />