A to Z index

Every public mixin and function of @nuvoui/core, read from the doc blocks in the source when the site is built. Public means exported by index.scss, the module you load with @use "@nuvoui/core". The registry functions behind apply() are not listed separately; each one stands for the mixin of the same name.

360 public items: 341 mixins and 19 functions.

Page	Items
Functions	19
Layout mixins	64
Utility mixins	249
Tool and theme mixins	28

A B C D E F G H I J L M N O P R S T U V W X Z

A

absolute mixin: Sets position to absolute, removing the element from the normal document flow.
absolute-center mixin: Centers an element absolutely within its positioned parent using top and left 50% and a -50% translate.
adaptive-contrast mixin: Sets background-color and the higher contrast text colour, both computed at compile time; under prefers-contrast: more the background moves away from the text colour (darker under light text, lighter under dark text) for a higher ratio.
align mixin: Sets align-items, aligning grid items along the block axis of their cells. Grid only: for flex containers use the x-* mixins (x-center, x-start).
align-baseline mixin: Sets vertical-align to baseline (inline and table cell content).
align-bottom mixin: Sets vertical-align to bottom (inline and table cell content).
align-middle mixin: Sets vertical-align to middle (inline and table cell content).
align-top mixin: Sets vertical-align to top (inline and table cell content).
animate-bounce mixin: Sets an animation that moves the element to a horizontal and vertical offset and back, and emits its keyframes once.
animate-fade mixin: Sets a fade animation of type in, out, in-up or in-down (the up and down types also slide 20px), and emits its keyframes once; any other type raises an error.
animate-ping mixin: Sets an animation that scales the element up while fading it out, and emits its keyframes once.
animate-pulse mixin: Sets an animation that fades opacity between a maximum and a minimum, and emits its keyframes once.
animate-shake mixin: Sets a horizontal shake animation of the given intensity, and emits its keyframes once per intensity and unit (5px and 5rem get separate keyframes).
animate-spin mixin: Sets a full 360 degree rotation animation (any direction other than normal spins backwards), and emits its keyframes once.
apply mixin: Applies NuvoUI mixins by name in one call; each item may be followed by one state (hover, focus) and one breakpoint (sm, md, lg), which wrap it in &:state (group-hover: .group:hover &) and media-up().
apply-transform mixin: Writes the transform property that combines every --nu-translate-*, --nu-rotate, --nu-skew-* and --nu-scale-* variable; the transform mixins include it.
around mixin: Sets justify-content to space-around, giving each item equal space on both sides.
aspect-ratio mixin: Sets the aspect-ratio property from a width and height (emitted as 16 / 9), a single number, auto, calc() or var(); anything else raises an error.
auto-fill mixin: Creates as many columns of at least `$min-width` as fit, keeping empty tracks so items keep their column width.
auto-fit mixin: Creates as many columns of at least `$min-width` as fit, collapsing empty tracks so items stretch to fill the row.

B

backdrop-blur mixin: Sets the --nu-backdrop-blur variable to blur() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
backdrop-brightness mixin: Sets the --nu-backdrop-brightness variable to brightness() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
backdrop-contrast mixin: Sets the --nu-backdrop-contrast variable to contrast() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
backdrop-crystal mixin: Applies the crystal preset (blur(8px) saturate(150%)) directly to backdrop-filter, so no backdrop-layer is needed.
backdrop-dark-glass mixin: Applies the dark glass preset (blur(8px) saturate(180%) brightness(70%) contrast(90%)) directly to backdrop-filter, so no backdrop-layer is needed.
backdrop-filter mixin: Sets backdrop-filter to the given value as written, replacing any composed or preset filter.
backdrop-frosted mixin: Applies the frosted preset (blur(8px) saturate(90%) brightness(120%)) directly to backdrop-filter, so no backdrop-layer is needed.
backdrop-glass mixin: Applies the glass preset (blur(8px) saturate(120%) contrast(90%)) directly to backdrop-filter, so no backdrop-layer is needed.
backdrop-grayscale mixin: Sets the --nu-backdrop-grayscale variable to grayscale() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
backdrop-hue-rotate mixin: Sets the --nu-backdrop-hue-rotate variable to hue-rotate() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
backdrop-invert mixin: Sets the --nu-backdrop-invert variable to invert() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
backdrop-layer mixin: Resets every backdrop filter variable to its identity value and writes the backdrop-filter that combines them; include it before the filter mixins.
backdrop-matte mixin: Applies the matte preset (blur(20px) saturate(90%) brightness(90%)) directly to backdrop-filter, so no backdrop-layer is needed.
backdrop-none mixin: Removes the backdrop filter and returns the --nu-backdrop-* variables to their identity values, so a later composed filter stays valid.
backdrop-saturate mixin: Sets the --nu-backdrop-saturate variable to saturate() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
backdrop-sepia mixin: Sets the --nu-backdrop-sepia variable to sepia() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.
between mixin: Sets justify-content to space-between, spreading items with the free space between them.
bg mixin: Sets background-color from a role, palette name, theme word or colour, emitting the matching var(--nu-*) token.
block mixin: Sets display to block.
border mixin: Draws a border on all sides with a width key, a style and a colour that defaults to the border-regular token.
border-all mixin: Draws a border on all sides with a width, a style and a colour, all required; the same output as border() with every argument given.
border-bottom mixin: Draws a border on the bottom side in the border-regular colour unless a colour is given.
border-color mixin: Sets border-color from a role, palette name, theme word or colour, emitting the matching var(--nu-*) token.
border-end mixin: Draws a border on the inline end side (right in LTR, left in RTL) in the border-regular colour unless a colour is given.
border-left mixin: Draws a border on the left side (physical) in the border-regular colour unless a colour is given.
border-right mixin: Draws a border on the right side (physical) in the border-regular colour unless a colour is given.
border-start mixin: Draws a border on the inline start side (left in LTR, right in RTL) in the border-regular colour unless a colour is given.
border-style mixin: Sets --nu-border-style, which changes the style of borders drawn by border(), border-top() and the other side mixins on the same element.
border-top mixin: Draws a border on the top side in the border-regular colour unless a colour is given.
bottom mixin: Sets the physical bottom offset from the spacing scale or a raw value.
break-all mixin: Allows line breaks between any two characters (word-break: break-all).
break-normal mixin: Resets overflow-wrap and word-break to normal line breaking.
break-words mixin: Lets long words break onto the next line when they would overflow (overflow-wrap: break-word).

C

capitalize mixin: Capitalizes the first letter of each word.
center mixin: Sets justify-content to center, centring items on the main axis.
col mixin: Sets flex-direction to column; applies to a flex container.
col-end mixin: Sets grid-column-end, the column line where the item ends.
col-reverse mixin: Sets flex-direction to column-reverse; applies to a flex container.
col-span mixin: Makes a grid item span a number of columns.
col-start mixin: Sets grid-column-start, the column line where the item begins.
collapse mixin: Sets visibility to collapse, which removes table rows and columns without changing table layout.
cols mixin: Sets grid-template-columns to a number of equal columns that can shrink below their content width.
cols-custom mixin: Sets grid-template-columns to a custom track list, with underscores standing in for spaces.
container mixin: Builds a centred, full-width container whose max-width steps up at each breakpoint (breakpoint width minus 100px), with block padding of spacing key 4 (top and bottom only, as in v1).
container-base mixin: Makes an element full width and centres it on the inline axis (margin-inline: auto).
container-between mixin: Applies styles when the container width is from the lower breakpoint up to just below the upper breakpoint (upper minus 0.02px).
container-down mixin: Applies styles when the container is narrower than the given breakpoint (max-width of the breakpoint minus 0.02px).
container-name mixin: Sets container-name so container queries can target this container by name.
container-only mixin: Applies styles only while the container is between the given breakpoint and the next larger one (minus 0.02px); the largest breakpoint has no upper limit.
container-padding mixin: Sets padding-top and padding-bottom to the same spacing value.
container-query mixin: Applies styles when the container is at least the given width; a breakpoint name or a length resolves like container-up(), and calc() is used as is.
container-type mixin: Sets container-type so the element becomes a query container.
container-up mixin: Applies styles when the container is at least the given breakpoint width (min-width container query).
contents mixin: Sets display to contents, so the element box disappears and its children join the parent layout.
create-color-scale() function: Returns the OKLCH shade scale (50 to 950) of a colour value, precomputed for the default role and palette colours and generated for any other; the value is shaded directly and never re-read as a palette name, so "blue" is CSS blue.
cursor mixin: Sets the cursor property to a CSS cursor keyword, or to a value holding a function such as url() or var(); any other word raises an error.

D

dark-mode mixin: Applies styles where the dark theme tokens resolve: on and under the elements a dark-valued theme block matches (data-theme="dark", data-theme="inverse" on a light page, a nested inverse section, and :root without data-theme when the OS is dark), stopping at a nested data-theme section that resolves light.
dark-theme mixin: Emits the dark theme token custom properties (--nu-*), including computed text-on-{role} and the error aliases of danger.
delay mixin: Sets transition-delay from a $delays key or a raw time; delays are not tokens, so a key gives its configured time.
display-mode mixin: Applies styles when the page runs in the given Progressive Web App display mode.
duration mixin: Sets transition-duration from a $durations key, emitted as var(--nu-duration-*), or a raw time.
dvh mixin: Sets height to 100dvh where supported and to 100vh otherwise, each inside an @supports block.

E

ease mixin: Sets transition-timing-function from a $timing-functions key, emitted as var(--nu-ease-*), or a raw timing function.
ease-in mixin: Sets transition-timing-function to the in key, var(--nu-ease-in).
ease-in-out mixin: Sets transition-timing-function to the in-out key, var(--nu-ease-in-out).
ease-linear mixin: Sets transition-timing-function to the linear key, var(--nu-ease-linear).
ease-out mixin: Sets transition-timing-function to the out key, var(--nu-ease-out).
elevation mixin: Sets a shadow and a matching z-index for levels 1 to 5 (sm, md, lg, xl, monster); other levels raise an error.
end mixin: Sets justify-content to flex-end, packing items at the end of the main axis.
ensure-keyframes mixin: Emits an @keyframes rule with the given name once per compilation, at the root of the stylesheet (outside @media, @supports, @container and @scope, inside any @layer); later calls with the same name emit nothing.
evenly mixin: Sets justify-content to space-evenly, making every gap between and around items equal.

F

feature-enabled() function: Whether utility classes for a feature are generated: requires $generate-utility-classes and a feature flag that is on (a feature missing from $feature-flags counts as on).
fill mixin: Sizes a flex child to span a number of columns out of `$column-count` (12 by default), subtracting the container gap from `--nu-flex-gap`.
fill-auto mixin: Sets flex to 1 1 auto so the item starts at its content size, then grows and shrinks.
fill-full mixin: Sets flex to 0 0 100% so the item takes a full row and neither grows nor shrinks.
find-text-color() function: Picks whichever of two text colours has the higher WCAG contrast against the background, by default the light theme text-regular and text-inverted; a transparent background raises an error.
fine-pointer mixin: Applies styles on devices with a precise pointer such as a mouse (pointer: fine).
fix-units() function: Adds a unit to a unitless number or numeric string; values with a unit, CSS keywords and null pass through, and other types raise an error.
fixed mixin: Sets position to fixed, placing the element relative to the viewport.
flex mixin: Sets display to flex, establishing a flex container.
flow-col mixin: Sets grid-auto-flow to column, placing items column by column; same as the `.flow-col` class.
flow-dense mixin: Sets grid-auto-flow to dense so later items back-fill earlier gaps; same as the `.flow-dense` class.
flow-row mixin: Sets grid-auto-flow to row, placing items row by row; same as the `.flow-row` class.
font mixin: Sets font-weight from a $font-weights key (bold gives var(--nu-font-weight-bold)) or a unitless number from 1 to 1000; anything else raises an error.
font-size mixin: Sets font-size from a $font-sizes key (lg gives var(--nu-font-size-lg)) or a raw value; an unknown key or unitless number raises an error.

G

gap mixin: Sets gap on a flex or grid container and passes it to direct children as --nu-flex-gap for fill() widths.
gap-x mixin: Sets column-gap on a flex or grid container and passes it to direct children as --nu-flex-gap for fill() widths.
gap-y mixin: Sets row-gap on a flex or grid container; --nu-flex-gap is not set because it only feeds inline widths.
generate-backdrop-filter-utilities mixin: Emits the backdrop utility classes (layer, filters, presets, none), with an @breakpoint suffix when a breakpoint is given.
get-breakpoint-value() function: Resolves a breakpoint name from $breakpoints to its width; a length passes through, and a unitless number that is not a breakpoint name or an unknown name raises an error.
get-color() function: Returns a real colour value for Sass maths from a role, palette name or colour value at a shade stop; role and palette names win over CSS named colours, and var() or an invalid stop raises an error.
get-css-var() function: Normalises a var() reference given as a string (quoted or not) into a var() value; any other value raises an error.
get-rounded-value() function: Resolves a border radius: a $border-radii key gives its token, null gives the md token, and values with units stay raw.
get-type() function: Classifies a value as null, color, number, boolean, list, map, css-var, state, breakpoint, font-weight, border-radius, css-keyword, css-function or string.
gradient mixin: Sets background-image to a linear-gradient with the given direction and colour stops; colour names resolve like bg() (roles, palette names, theme words), other colours and positions are written as passed.
grid mixin: Sets display to grid, establishing a grid container.
grid-col-at mixin: Sets grid-column to place an item across columns.
grid-place-at mixin: Sets grid-column and grid-row together to place an item in the grid.
grid-row-at mixin: Sets grid-row to place an item across rows.
grow mixin: Sets flex to 1 1 0% so the item grows and shrinks from a zero base, sharing space equally with other grow items.
grow-only mixin: Sets flex to 1 0 auto so the item grows from its content size but never shrinks.

H

h-auto mixin: Sets height to auto.
h-fit mixin: Sets height to fit-content.
h-full mixin: Sets height to 100%.
h-max mixin: Sets height to max-content.
h-min mixin: Sets height to min-content.
h-screen mixin: Sets height to 100dvh, the full dynamic viewport height.
height mixin: Sets height from a spacing key, a percentage key, a sizing keyword or a raw value; negative keys and unknown words raise an error.
height-percent mixin: Sets height as a percentage from a unitless number or a percentage; any other value raises an error.
hide mixin: Sets display to none.
high-contrast mixin: Wraps styles in a forced-colors: active media query (Windows high contrast and other forced colour modes).
hover-ready mixin: Adds a transition on all properties with the default duration and easing tokens ($transition-default-duration, $transition-default-ease) so hover changes animate.

I

inline mixin: Sets display to inline.
inline-block mixin: Sets display to inline-block.
inline-flex mixin: Sets display to inline-flex, establishing an inline flex container.
inline-grid mixin: Sets display to inline-grid, establishing an inline grid container.
inset mixin: Sets the inset shorthand (top, right, bottom and left) to one value.
inset-auto mixin: Sets the inset shorthand to auto on all four sides.
inset-end mixin: Sets inset-inline-end, which is the right offset in LTR and the left offset in RTL.
inset-start mixin: Sets inset-inline-start, which is the left offset in LTR and the right offset in RTL.
inset-x mixin: Sets the physical left and right offsets to one value.
inset-x-auto mixin: Sets the physical left and right offsets to auto.
inset-y mixin: Sets the top and bottom offsets to one value.
inset-y-auto mixin: Sets the top and bottom offsets to auto.
invisible mixin: Sets visibility to hidden, keeping the element in the layout.
is-css-var() function: Whether a value is a var() reference.
italic mixin: Sets the font style to italic.

J

justify mixin: Sets justify-items, aligning grid items along the inline axis of their cells. Grid only: for flex containers use the flex justify mixins (start, center, between).

L

landscape mixin: Applies styles in landscape orientation ((orientation: landscape) media query, no screen and).
leading mixin: Sets line-height from a $line-heights key (tight gives var(--nu-line-height-tight)) or a raw value; negative or unknown values raise an error.
leading-loose mixin: Sets line-height to the loose key (var(--nu-line-height-loose)); raises an error if the key is missing from $line-heights.
leading-none mixin: Sets line-height to the none key (var(--nu-line-height-none)); raises an error if the key is missing from $line-heights.
leading-normal mixin: Sets line-height to the normal key (var(--nu-line-height-normal)); raises an error if the key is missing from $line-heights.
leading-relaxed mixin: Sets line-height to the relaxed key (var(--nu-line-height-relaxed)); raises an error if the key is missing from $line-heights.
leading-snug mixin: Sets line-height to the snug key (var(--nu-line-height-snug)); raises an error if the key is missing from $line-heights.
leading-tight mixin: Sets line-height to the tight key (var(--nu-line-height-tight)); raises an error if the key is missing from $line-heights.
left mixin: Sets the physical left offset from the spacing scale or a raw value.
line-through mixin: Draws a line through text.
lowercase mixin: Transforms text to lowercase.

M

m mixin: Sets margin on all sides from a spacing key, a negative key, auto or a raw value.
max-h-full mixin: Sets max-height to 100%.
max-height mixin: Sets max-height from a spacing key, a percentage key, a sizing keyword, none or a raw value; negative keys and unknown words raise an error.
max-height-percent mixin: Sets max-height as a percentage from a unitless number or a percentage; any other value raises an error.
max-w-full mixin: Sets max-width to 100%.
max-width mixin: Sets max-width from a spacing key, a percentage key, a breakpoint name, a sizing keyword, none or a raw value; negative keys and unknown words raise an error.
max-width-percent mixin: Sets max-width as a percentage from a unitless number or a percentage; any other value raises an error.
mb mixin: Sets margin-bottom from a spacing key, a negative key, auto or a raw value.
me mixin: Sets margin-inline-end (right in LTR, left in RTL) from a spacing key, a negative key, auto or a raw value.
me-auto mixin: Sets margin-inline-end to auto, pushing the element to the inline start in a flex row.
media-between mixin: Applies styles from the lower breakpoint up to just below the upper breakpoint (upper minus 0.02px).
media-down mixin: Applies styles below the given breakpoint (max-width of the breakpoint minus 0.02px).
media-only mixin: Applies styles only between the given breakpoint and the next larger one (minus 0.02px); the largest breakpoint has no upper limit.
media-up mixin: Applies styles from the given breakpoint width upwards (min-width media query, no screen and).
min-h-full mixin: Sets min-height to 100%.
min-height mixin: Sets min-height from a spacing key, a percentage key, a sizing keyword or a raw value; negative keys and unknown words raise an error.
min-height-percent mixin: Sets min-height as a percentage from a unitless number or a percentage; any other value raises an error.
min-w-full mixin: Sets min-width to 100%.
min-width mixin: Sets min-width from a spacing key, a percentage key, a breakpoint name, a sizing keyword or a raw value; negative keys and unknown words raise an error.
min-width-percent mixin: Sets min-width as a percentage from a unitless number or a percentage; any other value raises an error.
ml mixin: Sets margin-left (physical, does not follow text direction) from a spacing key, a negative key, auto or a raw value.
ml-auto mixin: Sets margin-left to auto (physical), pushing the element to the right in a flex row.
mr mixin: Sets margin-right (physical, does not follow text direction) from a spacing key, a negative key, auto or a raw value.
mr-auto mixin: Sets margin-right to auto (physical), pushing the element to the left in a flex row.
ms mixin: Sets margin-inline-start (left in LTR, right in RTL) from a spacing key, a negative key, auto or a raw value.
ms-auto mixin: Sets margin-inline-start to auto, pushing the element to the inline end in a flex row.
mt mixin: Sets margin-top from a spacing key, a negative key, auto or a raw value.
mx mixin: Sets margin on the inline start and end (margin-inline), following text direction.
mx-auto mixin: Centers a block element on the inline axis with margin-inline: auto.
my mixin: Sets margin on the block start and end (margin-block), top and bottom in horizontal writing modes.

N

no-grow mixin: Sets flex to none so the item keeps its size and neither grows nor shrinks.
no-shrink mixin: Sets flex-shrink to 0 so the item never shrinks below its size.
no-underline mixin: Removes text decoration.
normal-case mixin: Removes any text transform.
not-italic mixin: Resets the font style to normal.
nowrap mixin: Sets flex-wrap to nowrap so items stay on one line; applies to a flex container.

O

opacity mixin: Sets opacity from a $opacities key, emitted as var(--nu-opacity-*) as in .opacity-50, or passes a percentage, calc(), var() or CSS-wide keyword through; a bare 0.5 raises an error.
origin mixin: Sets transform-origin from an $origin-values key (top-left gives top left, matching .origin-top-left) or a transform-origin value.
overflow-auto mixin: Sets overflow to auto on both axes.
overflow-hidden mixin: Sets overflow to hidden on both axes.
overflow-label mixin: Truncates a flex or grid child to one line; min-width 0 lets it shrink below its content width.
overflow-scroll mixin: Sets overflow to scroll on both axes.
overflow-visible mixin: Sets overflow to visible on both axes.
overflow-x-auto mixin: Sets overflow-x to auto (horizontal axis).
overflow-x-hidden mixin: Sets overflow-x to hidden (horizontal axis).
overflow-x-scroll mixin: Sets overflow-x to scroll (horizontal axis).
overflow-y-auto mixin: Sets overflow-y to auto (vertical axis).
overflow-y-hidden mixin: Sets overflow-y to hidden (vertical axis).
overflow-y-scroll mixin: Sets overflow-y to scroll (vertical axis).

P

p mixin: Sets padding on all sides from a spacing key or a raw value.
pb mixin: Sets padding-bottom from a spacing key or a raw value.
pe mixin: Sets padding-inline-end (right in LTR, left in RTL) from a spacing key or a raw value.
pill mixin: Rounds all corners fully with the full radius token, var(--nu-radius-full).
pl mixin: Sets padding-left (physical, does not follow text direction) from a spacing key or a raw value.
place mixin: Sets place-items, aligning grid items on both axes of their cells at once. Grid only.
portrait mixin: Applies styles in portrait orientation ((orientation: portrait) media query, no screen and).
pr mixin: Sets padding-right (physical, does not follow text direction) from a spacing key or a raw value.
prefers-dark mixin: Wraps styles in a prefers-color-scheme: dark media query, following the OS setting only (data-theme is ignored).
print mixin: Wraps styles in a print media query.
ps mixin: Sets padding-inline-start (left in LTR, right in RTL) from a spacing key or a raw value.
pt mixin: Sets padding-top from a spacing key or a raw value.
px mixin: Sets padding on the inline start and end (padding-inline), following text direction.
py mixin: Sets padding on the block start and end (padding-block), top and bottom in horizontal writing modes.

R

reduced-motion mixin: Wraps styles in a prefers-reduced-motion: reduce media query.
relative mixin: Sets position to relative, creating a positioning context for absolute children.
responsive-typography mixin: Emits the typography utility classes (size, weight, line height, alignment, transform, style, decoration, tracking), suffixed with @breakpoint when a breakpoint is given.
right mixin: Sets the physical right offset from the spacing scale or a raw value.
rotate mixin: Rotates the element by setting --nu-rotate and writing the combined transform.
rounded mixin: Rounds all corners with a $border-radii key (md when omitted) or a raw length.
rounded-b mixin: Rounds the bottom left and bottom right corners with a $border-radii key (md when omitted) or a raw length.
rounded-bl mixin: Rounds the bottom left corner with a $border-radii key (md when omitted) or a raw length.
rounded-br mixin: Rounds the bottom right corner with a $border-radii key (md when omitted) or a raw length.
rounded-e mixin: Rounds both inline end corners (border-start-end-radius and border-end-end-radius) with a $border-radii key (md when omitted) or a raw length.
rounded-ee mixin: Rounds the block end, inline end corner (border-end-end-radius) with a $border-radii key (md when omitted) or a raw length.
rounded-es mixin: Rounds the block end, inline start corner (border-end-start-radius) with a $border-radii key (md when omitted) or a raw length.
rounded-l mixin: Rounds the top left and bottom left corners (physical) with a $border-radii key (md when omitted) or a raw length.
rounded-r mixin: Rounds the top right and bottom right corners (physical) with a $border-radii key (md when omitted) or a raw length.
rounded-s mixin: Rounds both inline start corners (border-start-start-radius and border-end-start-radius) with a $border-radii key (md when omitted) or a raw length.
rounded-se mixin: Rounds the block start, inline end corner (border-start-end-radius) with a $border-radii key (md when omitted) or a raw length.
rounded-ss mixin: Rounds the block start, inline start corner (border-start-start-radius) with a $border-radii key (md when omitted) or a raw length.
rounded-t mixin: Rounds the top left and top right corners with a $border-radii key (md when omitted) or a raw length.
rounded-tl mixin: Rounds the top left corner with a $border-radii key (md when omitted) or a raw length.
rounded-tr mixin: Rounds the top right corner with a $border-radii key (md when omitted) or a raw length.
row mixin: Sets flex-direction to row; applies to a flex container.
row-end mixin: Sets grid-row-end, the row line where the item ends.
row-reverse mixin: Sets flex-direction to row-reverse; applies to a flex container.
row-span mixin: Makes a grid item span a number of rows.
row-start mixin: Sets grid-row-start, the row line where the item begins.
rows mixin: Sets grid-template-rows to a number of equal rows that can shrink below their content height.

S

safe-area-inset mixin: Sets a property to the device safe area inset for one side, for notches and rounded screens.
safe-unit-name() function: Converts a unit to a string that is safe in an identifier (% gives per, . gives dot); used to build unique keyframe names.
scale mixin: Scales the element on both axes by setting --nu-scale-x and --nu-scale-y and writing the combined transform.
scale-x mixin: Scales the element horizontally by setting --nu-scale-x and writing the combined transform.
scale-y mixin: Scales the element vertically by setting --nu-scale-y and writing the combined transform.
self-auto mixin: Sets align-self to auto, so the item follows the container's align-items.
self-baseline mixin: Sets align-self to baseline, aligning this item along the text baseline.
self-center mixin: Sets align-self to center, centring this item on the cross axis.
self-end mixin: Sets align-self to flex-end, aligning this item to the end of the cross axis.
self-start mixin: Sets align-self to flex-start, aligning this item to the start of the cross axis.
self-stretch mixin: Sets align-self to stretch, stretching this item to fill the cross axis.
shadow mixin: Sets box-shadow from a configured size; the default colour emits the var(--nu-shadow-*) token when the theme feature is on, other colours emit a raw shadow.
shadow-base mixin: Sets box-shadow from explicit offset, blur, spread and colour values.
shadow-inset mixin: Sets an inset box-shadow from a configured size and colour, always as a raw value (no token).
show mixin: Sets display to revert, restoring the element's natural display (block for a div, table for a table) after .hide or a responsive hide.
shrink mixin: Sets flex-shrink to 1 so the item can shrink when space runs out.
shrink-twice mixin: Sets flex-shrink to 2 so the item shrinks twice as fast as items with flex-shrink 1.
skew-x mixin: Skews the element along the x axis by setting --nu-skew-x and writing the combined transform.
skew-y mixin: Skews the element along the y axis by setting --nu-skew-y and writing the combined transform.
space-x mixin: Adds margin-inline-start to every direct child after the first, spacing children along the inline axis.
space-y mixin: Adds margin-block-start to every direct child after the first, spacing children along the block axis (vertically in horizontal writing modes).
split() function: Splits a string on a delimiter, ignoring delimiters inside parentheses, and trims each part.
start mixin: Sets justify-content to flex-start, packing items at the start of the main axis.
static mixin: Sets position to static, the default document flow.
sticky mixin: Sets position to sticky with top 0 and z-index 999, so the element stays in view while scrolling.
str-replace() function: Replaces every occurrence of $search in $string.
str-trim() function: Removes leading and trailing spaces from a string.
stretch mixin: Makes the direct children of a flex container share the main axis equally (each child gets flex: 1 1 0%). Takes no argument; when one child must be wider, give it a fill-{n} or no-grow class.
strip-quotes() function: Removes one pair of matching single or double quote characters around a string; other values pass through.
strip-unit() function: Removes the unit from a number; a non-number raises an error.
supports mixin: Wraps styles in an @supports query for the given declaration; pass it as a quoted string.

T

table mixin: Sets display to table.
table-cell mixin: Sets display to table-cell.
table-row mixin: Sets display to table-row.
text-center mixin: Centers text.
text-color mixin: Sets color from a role, palette name, theme word or colour, emitting the matching var(--nu-text-*) token.
text-end mixin: Aligns text to the inline end: right in LTR, left in RTL.
text-justify mixin: Justifies text to both edges.
text-left mixin: Aligns text to the left (physical, does not follow text direction).
text-on-color mixin: Sets the text colour for content placed on a filled colour: a role gives its var(--nu-text-on-*) token, anything else the higher contrast text colour computed at compile time.
text-right mixin: Aligns text to the right (physical, does not follow text direction).
text-start mixin: Aligns text to the inline start: left in LTR, right in RTL.
to-number() function: Converts a string to a number, keeping a trailing CSS unit as a real unit ("12px" gives 12px) or applying $append-unit; other trailing text is dropped and a non-numeric string gives null.
to-number-raw() function: Parses the leading number of a string and returns it with the remaining text; a string that does not start with a number gives null.
token() function: Returns the var() reference of a v2 token; an unknown name, a --nu- prefixed name or a disabled theme feature raises an error.
tooltip-variables mixin: Emits the tooltip component variables (--nu-tooltip--{Name}); the bubble uses text-regular as background and text-inverted as text, so it contrasts with the page in both themes.
top mixin: Sets the physical top offset from the spacing scale or a raw value.
touch mixin: Applies styles on touch devices: no hover support and a coarse pointer.
tracking mixin: Sets letter-spacing from a key (tighter, tight, normal, wide, wider, widest; raw em values, not tokens) or a raw value; anything else raises an error.
tracking-normal mixin: Sets letter-spacing to the normal key (0).
tracking-tight mixin: Sets letter-spacing to the tight key (-0.025em).
tracking-tighter mixin: Sets letter-spacing to the tighter key (-0.05em).
tracking-wide mixin: Sets letter-spacing to the wide key (0.025em).
tracking-wider mixin: Sets letter-spacing to the wider key (0.05em).
tracking-widest mixin: Sets letter-spacing to the widest key (0.1em).
transition mixin: Transitions every animatable property with the default duration and easing tokens ($transition-default-duration, 200; $transition-default-ease, in-out).
transition-colors mixin: Transitions colour properties (color, background-color, border-color, text-decoration-color, fill, stroke) with the default duration and easing tokens, like transition.
transition-none mixin: Disables transitions by setting transition-property to none.
transition-opacity mixin: Transitions opacity only, with the default duration and easing tokens, like transition.
transition-shadow mixin: Transitions box-shadow only, with the default duration and easing tokens, like transition.
transition-transform mixin: Transitions transform only, with the default duration and easing tokens, like transition.
translate mixin: Moves the element on the x axis, and on the y axis when $y is given, then writes the combined transform.
translate-x mixin: Moves the element along the x axis by setting --nu-translate-x and writing the combined transform.
translate-y mixin: Moves the element along the y axis by setting --nu-translate-y and writing the combined transform.
translate-z mixin: Moves the element along the z axis by setting --nu-translate-z and writing the combined transform.
truncate mixin: Truncates text to one line with an ellipsis, or to a number of lines like truncate-lines() (truncate(2) matches the .truncate-2 class).
truncate-lines mixin: Clamps text to a number of lines with an ellipsis using -webkit-line-clamp.

U

underline mixin: Underlines text.
uppercase mixin: Transforms text to uppercase.

V

visible mixin: Sets visibility to visible.

W

w-auto mixin: Sets width to auto.
w-fit mixin: Sets width to fit-content.
w-full mixin: Sets width to 100%.
w-max mixin: Sets width to max-content.
w-min mixin: Sets width to min-content.
w-screen mixin: Sets width to 100vw, the full viewport width.
whitespace-normal mixin: Sets white-space to normal, collapsing spaces and wrapping lines.
whitespace-nowrap mixin: Prevents text from wrapping (white-space: nowrap).
whitespace-pre mixin: Preserves spaces and line breaks without wrapping (white-space: pre).
whitespace-pre-line mixin: Collapses spaces but keeps line breaks (white-space: pre-line).
whitespace-pre-wrap mixin: Preserves spaces and line breaks and wraps lines (white-space: pre-wrap).
width mixin: Sets width from a spacing key, a percentage key, a breakpoint name, a sizing keyword or a raw value; negative keys and unknown words raise an error.
width-percent mixin: Sets width as a percentage from a unitless number or a percentage; any other value raises an error.
wrap mixin: Sets flex-wrap to wrap so items move onto new lines; applies to a flex container.
wrap-reverse mixin: Sets flex-wrap to wrap-reverse so new lines stack in reverse order; applies to a flex container.

X

x-baseline mixin: Sets align-items to baseline, aligning items along their text baseline.
x-center mixin: Sets align-items to center, centring items on the cross axis.
x-content-around mixin: Sets align-content to space-around, giving each wrapped line equal space on both sides.
x-content-between mixin: Sets align-content to space-between, spreading wrapped lines with the free space between them.
x-content-center mixin: Sets align-content to center, centring wrapped lines on the cross axis.
x-content-end mixin: Sets align-content to flex-end, packing wrapped lines at the end of the cross axis.
x-content-evenly mixin: Sets align-content to space-evenly, making every gap between and around wrapped lines equal.
x-content-start mixin: Sets align-content to flex-start, packing wrapped lines at the start of the cross axis.
x-content-stretch mixin: Sets align-content to stretch, stretching wrapped lines to fill the cross axis.
x-end mixin: Sets align-items to flex-end, aligning items to the end of the cross axis.
x-start mixin: Sets align-items to flex-start, aligning items to the start of the cross axis.
x-stretch mixin: Sets align-items to stretch, stretching items to fill the cross axis.

Z

z-auto mixin: Sets z-index to auto.
z-base mixin: Sets z-index to the base level token.
z-drawer mixin: Sets z-index to the drawer level token.
z-dropdown mixin: Sets z-index to the dropdown level token.
z-fixed mixin: Sets z-index to the fixed level token.
z-hover mixin: Sets z-index to the hover level token.
z-index mixin: Sets z-index from a numbered key (raw value), a named level (var(--nu-z-*) token), an integer, auto, calc() or var(); other values raise an error.
z-index-utilities mixin: Emits the .z-{key} and .z-{level} classes; with a breakpoint it adds the @breakpoint suffix but does not wrap them in a media query.
z-max mixin: Sets z-index to the max level token.
z-modal mixin: Sets z-index to the modal level token.
z-overlay mixin: Sets z-index to the overlay level token.
z-popover mixin: Sets z-index to the popover level token.
z-sticky mixin: Sets z-index to the sticky level token.
z-toast mixin: Sets z-index to the toast level token.
z-tooltip mixin: Sets z-index to the tooltip level token.