Customization

Customizing Functions

A guide to adding custom functions and aliases.

Token	Unit	CSS text
`$()`	-	`$()`
`calc()`	-	`calc()`
`translate()`	`rem`	`translate()`
`translateX()`	`rem`	`translateX()`
`translateY()`	`rem`	`translateY()`
`translateZ()`	`rem`	`translateZ()`
`translate3d()`	`rem`	`translate3d()`
`skew()`	`deg`	`skew()`
`skewX()`	`deg`	`skewX()`
`skewY()`	`deg`	`skewY()`
`skewZ()`	`deg`	`skewZ()`
`skew3d()`	`deg`	`skew3d()`
`rotate()`	`deg`	`rotate()`
`rotateX()`	`deg`	`rotateX()`
`rotateY()`	`deg`	`rotateY()`
`rotateZ()`	`deg`	`rotateZ()`
`rotate3d()`	`deg`	`rotate3d()`
`blur()`	`rem`	`blur()`
`drop-shadow()`	`rem`	`drop-shadow()`
`hue-rotate()`	`deg`	`hue-rotate()`
`rgb()`	-	`rgb()`
`rgba()`	-	`rgba()`
`hsl()`	-	`hsl()`
`hsla()`	-	`hsla()`
`color()`	-	`color()`
`color-contrast()`	-	`color-contrast()`
`color-mix()`	-	`color-mix()`
`hwb()`	-	`hwb()`
`lab()`	-	`lab()`
`lch()`	-	`lch()`
`oklab()`	-	`oklab()`
`oklch()`	-	`oklch()`
`light-dark()`	-	`light-dark()`
`clamp()`	-	`clamp()`
`repeat()`	-	`repeat()`
`linear-gradient()`	-	`linear-gradient()`
`radial-gradient()`	-	`radial-gradient()`
`conic-gradient()`	-	`conic-gradient()`
`repeating-linear-gradient()`	-	`repeating-linear-gradient()`
`repeating-radial-gradient()`	-	`repeating-radial-gradient()`
`repeating-conic-gradient()`	-	`repeating-conic-gradient()`
`matrix()`	-	`matrix()`
`matrix3d()`	-	`matrix3d()`
`scale()`	-	`scale()`
`scale3d()`	-	`scale3d()`
`scaleX()`	-	`scaleX()`
`scaleY()`	-	`scaleY()`
`scaleZ()`	-	`scaleZ()`

Master CSS functions allow you to define aliases for native CSS functions while also enabling unit conversion. For example, you can replace translate(2rem) with a simplified translate(32), assuming a default unit conversion (e.g., px), streamlining your styling logic.

Additionally, the functions simplify your template syntax. Instead of writing verbose CSS variables like var(--name), you can use the shorthand $(name), making your markup cleaner and more expressive.

Basic usage

Add a function

Add a function to config.functions to define a custom function.

export default {    functions: {        translate: { unit: 'rem' }     }}

Apply your custom functions:

<div class="translate(32)">…</div><div class="translate(2rem)">…</div>

`$(<name>)`

Use the $(<name>) default function to apply CSS variables (or Master CSS variables).

<div class="fg:$(foo)"><div class="fg:var(--foo)">

Customizing Functions

Overview

Basic usage

Add a function

$(<name>)

`$(<name>)`