scale-none utility
The scale-none utility sets the CSS property scale to none.
Tailwind CSS · Utilities reference · all subjects
scale
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
scale-<number> utilities
Scale utilities with numeric values use the format scale-<number> and produce the CSS scale: <number>% <number>%;. This scales an element uniformly by a percentage of its original size on both axes.
Negative scale utilities
Prefixing scale utilities with a hyphen, such as -scale-<number>, produces the CSS scale: calc(<number>% * -1) calc(<number>% * -1);. This mirrors and scales down an element by a percentage of its original size.
scale with arbitrary values
Scale utilities support arbitrary values using the format scale-[<value>], which produces the CSS scale: <value>;.
scale-y-<number> utilities
The scale-y-<number> utilities scale an element on the y-axis only, producing the CSS scale: var(--tw-scale-x) <number>%;. This scales the element's height while preserving the x-axis scale variable.
scale-z-<number> utilities
The scale-z-<number> utilities scale an element on the z-axis for 3D transforms, producing the CSS scale: var(--tw-scale-x) var(--tw-scale-y) <number>%;. This is used for 3D scaling while preserving the x and y axis scale variables.
Negative scale-z utilities
The -scale-z-<number> utilities produce the CSS scale: var(--tw-scale-x) var(--tw-scale-y) calc(<number>% * -1);, mirroring and scaling the element on the z-axis.
scale-z with custom property
The scale-z-(<custom-property>) utility produces the CSS scale: var(--tw-scale-x) var(--tw-scale-y) var(<custom-property>);.
scale-z with arbitrary values
The scale-z-[<value>] utility produces the CSS scale: var(--tw-scale-x) var(--tw-scale-y) <value>;.
scale-3d utility
The scale-3d utility produces the CSS scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);. This combines all three axes of scaling using CSS variables.
scale-75 example
The scale-75 utility scales an element to 75% of its original size on both axes. It produces scale: 75% 75%;.
scale-100 example
The scale-100 utility maintains an element at its original size (100% scale) on both axes. It produces scale: 100% 100%;.
scale-125 example
The scale-125 utility scales an element to 125% of its original size on both axes. It produces scale: 125% 125%;.
scale-y-75 example
The scale-y-75 utility scales an element to 75% of its original height while preserving the x-axis scale. It produces scale: var(--tw-scale-x) 75%;.
scale-y-100 example
The scale-y-100 utility maintains an element at 100% of its original height. It produces scale: var(--tw-scale-x) 100%;.
scale-y-125 example
The scale-y-125 utility scales an element to 125% of its original height. It produces scale: var(--tw-scale-x) 125%;.
-scale-x-75 example
The -scale-x-75 utility mirrors and scales an element to 75% on the x-axis. It produces scale: calc(75% * -1) var(--tw-scale-y);.
-scale-100 example
The -scale-100 utility mirrors and maintains an element at 100% scale on both axes. It produces scale: calc(100% * -1) calc(100% * -1);.
-scale-y-125 example
The -scale-y-125 utility mirrors and scales an element to 125% on the y-axis. It produces scale: var(--tw-scale-x) calc(125% * -1);.
Scale utilities support arbitrary values
Scale utilities can accept arbitrary values using bracket notation, such as scale-[1.7], which allows custom scale factors not in the default theme.
Scale utilities support state variants
Scale utilities can be applied conditionally using state variants. For example, hover:scale-120 applies a scale transformation when an element is hovered.