自訂
Creating Utilities
A guide to adding custom utility classes.
Overview
| Token | CSS declarations |
|---|---|
abs | position: absolute; |
block | display: block; |
bottom | bottom: 0; |
break-spaces | white-space: break-spaces; |
break-word | overflow-wrap: break-word;
overflow: hidden; |
capitalize | text-transform: capitalize; |
center | left: 0;
right: 0;
margin-left: auto;
margin-right: auto; |
center-content | justify-content: center;
align-items: center; |
container | container-type: inline-size; |
contents | display: contents; |
fit | width: fit-content;
height: fit-content; |
fixed | position: fixed; |
flex | display: flex; |
flow-root | display: flow-root; |
full | width: 100%;
height: 100%; |
gradient-text | -webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text; |
grid | display: grid; |
hidden | display: none; |
inline | display: inline; |
inline-block | display: inline-block; |
inline-flex | display: inline-flex; |
inline-grid | display: inline-grid; |
inline-table | display: inline-table; |
invisible | visibility: hidden; |
isolate | isolation: isolate; |
italic | font-style: italic; |
left | left: 0; |
list-item | display: list-item; |
lowercase | text-transform: lowercase; |
max-vh | max-height: 100vh; |
max-vw | max-width: 100vw; |
middle | top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto; |
min-vh | min-height: 100vh; |
min-vw | min-width: 100vw; |
oblique | font-style: oblique; |
overflowed | overflow: visible; |
rel | position: relative; |
right | right: 0; |
round | border-radius: 50%;
aspect-ratio: 1/1; |
rounded | border-radius: 1e9em; |
square | aspect-ratio: 1/1; |
sr-only | position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0; |
static | position: static; |
sticky | position: sticky; |
table | display: table; |
table-caption | display: table-caption; |
table-cell | display: table-cell; |
table-column | display: table-column; |
table-column-group | display: table-column-group; |
table-footer-group | display: table-footer-group; |
table-header-group | display: table-header-group; |
table-row | display: table-row; |
table-row-group | display: table-row-group; |
top | top: 0; |
untouchable | pointer-events: none; |
uppercase | text-transform: uppercase; |
vh | height: 100vh; |
video | aspect-ratio: 16/9; |
visible | visibility: visible; |
vw | width: 100vw; |
Master CSS enables you to group CSS declarations into reusable classes, streamlining your styling process. Unlike traditional utility classes that simply map to CSS properties, Master CSS introduces a flexible syntax that supports not only declarations, but also integrates seamlessly with selectors and at-rules.
This empowers developers to write expressive, maintainable, and highly customizable styles with minimal overhead.
Basic usage
Add a utility class
export default { utilities: { round: { 'border-radius': '50%', 'aspect-ratio': '1/1' } }}Apply your custom utility class:
<div class="round">o</div>Use with selectors and at-rules:
<div class="round:hover@sm">o</div>