Customizing utility classes for your design system.

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


export default {
utilities: {
show: {
display: 'block'
'hide-text': {
'font-size': 0

Apply your custom utilities:

<div class="show hide-text" hidden></div>

Basic usage





SyntaxCSS Declarations
squareaspect-ratio: 1/1;
videoaspect-ratio: 16/9;
roundedborder-radius: 1e9em;
roundborder-radius: 50%; aspect-ratio: 1/1;
hiddendisplay: none;
blockdisplay: block;
tabledisplay: table;
flexdisplay: flex;
griddisplay: grid;
contentsdisplay: contents;
inlinedisplay: inline;
inline-blockdisplay: inline-block;
inline-flexdisplay: inline-flex;
inline-griddisplay: inline-grid;
inline-tabledisplay: inline-table;
table-celldisplay: table-cell;
table-captiondisplay: table-caption;
flow-rootdisplay: flow-root;
list-itemdisplay: list-item;
table-rowdisplay: table-row;
table-columndisplay: table-column;
table-row-groupdisplay: table-row-group;
table-column-groupdisplay: table-column-group;
table-header-groupdisplay: table-header-group;
table-footer-groupdisplay: table-footer-group;
italicfont-style: italic;
obliquefont-style: oblique;
isolateisolation: isolate;
overflowedoverflow: visible;
untouchablepointer-events: none;
staticposition: static;
fixedposition: fixed;
absposition: absolute;
relposition: relative;
stickyposition: sticky;
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
visiblevisibility: visible;
invisiblevisibility: hidden;
vwwidth: 100vw;
vhheight: 100vh;
max-vwmax-width: 100vw;
max-vhmax-height: 100vh;
min-vwmin-width: 100vw;
min-vhmin-height: 100vh;
center-contentjustify-content: center; align-items: center;
sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
fullwidth: 100%; height: 100%;
toptop: 0;
leftleft: 0;
rightright: 0;
bottombottom: 0;
centerleft: 0; right: 0; margin-left: auto; margin-right: auto;
middletop: 0; bottom: 0; margin-top: auto; margin-bottom: auto;
break-spaceswhite-space: break-spaces;
break-wordoverflow-wrap: break-word; overflow: hidden;
gradient-text-webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
fitwidth: fit-content; height: fit-content;

View the full source code

Design Token

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.