Custom Syntax

Functions

Customizing functions for your design system.

🚧This page is still under construction and some content may not be complete.

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

Apply your custom functions:

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

Basic usage

🚧

Default

Syntax	Unit	Native Name
`$(…)`	-	`$`
`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`
`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`

View the full source code

Customizing animation keyframes for your design system.

Customizing media queries and breakpoints for your design system.

MIT License © Aoyue Design LLC.

Issue on this page