CSS Utility classes

Prefix / KlasseProperty / ZweckBeispiele / Varianten
fw-font-weightfw-400, fw-700, fw-bold
text-font-sizetext-12, text-16, text-lg
fs-font-stylefs-normal, fs-italic
ta-text-alignta-left, ta-center, ta-right, ta-justify
ls-letter-spacingls-1, ls-2, ls-tight
lh-line-heightlh-1, lh-150, lh-normal
tt-text-transformtt-upper, tt-lower, tt-cap
td-text-decorationtd-none, td-underline, td-line-through
blockdisplaydisplay: block
iblockdisplaydisplay: inline-block
flexdisplaydisplay: flex
iflexdisplaydisplay: inline-flex
griddisplaydisplay: grid
hidedisplaydisplay: none
of-overflowof-hidden, of-auto, of-scroll
vis-visibilityvis-hidden, vis-visible
op-opacityop-0, op-50, op-100
pos-positionpos-rel, pos-abs, pos-fix, pos-sticky
black-color (text-color)black-000, black-333, black-fff
bg-background-colorbg-red, bg-#fdd94a, bg-transparent
obj-object-fitobj-cover, obj-contain, obj-fill
mi-margin-inlinemi-0, mi-auto, mi-20
bd-borderbd-1, bd-2, bd-none, bd-dashed
r-border-radiusr-0, r-8, r-50%
z-z-indexz-1, z-10, z-999
flex-r-betweenflex row space-betweendisplay:flex; flex-direction:row; justify-content:space-between;
flex-c-betweenflex column space-betweendisplay:flex; flex-direction:column; justify-content:space-between;
m-marginm-0, m-10, m-auto
p-paddingp-0, p-5, p-20
mt-/mb-margin-top/bottommt-10, mb-20
pt-/pb-padding-top/bottompt-5, pb-15
w-widthw-100, w-50%, w-auto
h-heighth-100, h-50vh, h-auto
minw-min-widthminw-200
maxw-max-widthmaxw-800, maxw-full
gap-gap (Grid/Flex spacing)gap-5, gap-20
jc-justify-contentjc-start, jc-center, jc-between
ai-align-itemsai-start, ai-center, ai-end
as-align-selfas-start, as-center, as-stretch
fg-flex-growfg-0, fg-1
fsz-flex-shrinkfsz-0, fsz-1
fd-flex-directionfd-row, fd-col
fwx-flex-wrapfwx-nowrap, fwx-wrap
cur-cursorcur-pointer, cur-default, cur-wait
sh-box-shadowsh-sm, sh-md, sh-lg, sh-none
tr-transitiontr-all, tr-colors, tr-none
dur-transition-durationdur-150, dur-300
scale-transform: scalescale-90, scale-100, scale-110
rot-transform: rotaterot-45, rot-90, rot-180
abs-centerabsolute zentrierenpos-abs; top:50%; left:50%; transform:translate(-50%,-50%);