Background/Border/Text Color

@for (i of colorNames; track i) { .[bg|border|text]-{{i}}-[{{colorHues}}] } @for (c of ['white','black','light','dark']; track c) { .[bg|border|text]-{{c}} }

Position

@for (i of ['static','fixed','absolute','relative','sticky']; track i) { .{{i}} }

Display

@for (i of ['block','inline-block','inline', 'flex','inline-flex','none']; track i) { .d-{{i}} }

Flexbox (Direction)

@for (i of ['row','row-reverse','col','col-reverse']; track i) { .flex-{{i}} }

Flexbox (Fill & Grow & shrink)

.flex-fill @for (i of ['grow-0','grow-1']; track i) { .flex-{{i}} } @for (i of ['shrink-0','shrink-1']; track i) { .flex-{{i}} }

Flexbox (Wrap)

@for (i of ['wrap','nowrap','wrap-reverse']; track i) { .flex-{{i}} }

Flexbox (Justify content)

@for (i of ['start','end','center','between','around']; track i) { .justify-content-{{i}} }

Flexbox (Align content)

@for (i of ['start','end','center','between','around','stretch']; track i) { .align-content-{{i}} }

Flexbox (Align items)

@for (i of ['start','end','center','baseline','stretch']; track i) { .align-items-{{i}} }

Flexbox (Align self)

@for (i of ['auto','start','end','center','baseline','stretch']; track i) { .align-self-{{i}} }

Margin

@for (i of [0,4,8,16,24,32,48,'auto']; track i) { .m[-[t|b|r|l|x|y]]-{{i}} }

Negative Margin

@for (i of [4,8,16,24,32,48]; track i) { .m[-[t|b|r|l|x|y]]--{{i}} }

Padding

@for (i of [0,4,8,16,24,32,48]; track i) { .p[-[t|b|r|l|x|y]]-{{i}} }

Gap

@for (i of [0,4,8,16,24,32,48]; track i) { .gap[-[t|b|r|l|x|y]]-{{i}} }

Border

@for (i of [0,1,2,3,4,5]; track i) { .b[-[t|b|r|l|x|y]]-{{i}} }

Border Width

@for (i of [0,1,2,3,4,5]; track i) { .border[-[t|b|r|l|x|y]]-{{i}} }

Border Style

@for (i of ['solid','dashed','dotted','double','hidden','none']; track i) { .border[-[t|b|r|l|x|y]]-{{i}} }

Border Radius

@for (i of [0,4,8,16,24,32,'full']; track i) { .r[-[t|b]-[r|l]]-{{i}}, r[-[t|b|l|r]]-{{i}} }

Width (%)

@for (i of [20,25,40,50,60,75,80,'full','auto']; track i) { .w-{{i}} }

Height (%)

@for (i of [20,25,40,50,60,75,80,'full','auto']; track i) { .h-{{i}} }

Font Weight

@for (i of [1,2,3,4,5,6,7,8,9]; track i) { .f-w-{{i*100}} }

Font Size

@for (i of [0,10,12,14,16,18,20]; track i) { .f-s-{{i}} }

Font Style

.font-italic .font-normal

Text Align

.text-center .text-right .text-left

Text Decoration

.text-none .text-underline .text-line-through

Text Transform

.text-capitalize .text-uppercase .text-lowercase

White Space

.text-normal .text-nowrap

Word Wrap

.text-break

Text Overflow

.text-ellipsis

Color

.text-reset .text-current

Vertical Align

@for (i of ['top','middle','bottom']; track i) { .align-{{i}} }

Cursor

@for (i of ['default','pointer','text', 'move','copy','not-allowed']; track i) { .cursor-{{i}} }

User Select

@for (i of ['all','auto','none']; track i) { .select-{{i}} }

Pointer Events

.pointer-events-none .pointer-events-auto

Overflow

@for (i of ['auto','hidden','visible','scroll']; track i) { .overflow[-[x|y]]-{{i}} }

Object Fit

@for (i of ['cover','contain','fill','none','scale-down']; track i) { .object-{{i}} }

Object Position

@for (i of ['top','bottom','center','left','left-top', 'left-right','right','right-top','right-bottom']; track i) { .object-{{i}} }

Icon Size

@for (i of [18,24,36,48]; track i) { .icon-{{i}} }