BlickCss
BlickTheme | class
margin
token | output | unit
m-* | margin: * | px
my-* | margin-top: *; margin-bottom: * | px
mx-* | margin-left: *; margin-right: * | px
mt-* | margin-top: * | px
mr-* | margin-right: * | px
mb-* | margin-bottom: * | px
ml-* | margin-left: * | px
ms-* | margin-inline-start: * | px
me-* | margin-inline-end: * | px
center | margin:auto | -
space-* | margin-left: *$>*+* | px
space-x-* | margin-left: *$>*+* | px
space-y-* | margin-top: *$>*+* | px
padding
token | output | unit
p-* | padding: * | px
py-* | padding-top: *; padding-bottom: * | px
px-* | padding-left: *; padding-right: * | px
pt-* | padding-top: * | px
pr-* | padding-right: * | px
pb-* | padding-bottom: * | px
pl-* | padding-left: * | px
ps-* | padding-inline-start: * | px
pe-* | padding-inline-end: * | px
border
token | output | unit
b-* | border-width: * | px
bt-* | border-top-width: * | px
br-* | border-right-width: * | px
bb-* | border-bottom-width: * | px
bl-* | border-left-width: * | px
bc-* | border-color: * | -
bc-0 | border-color: #000 | -
bc-f | border-color: #fff | -
bc-tp | border-color: transparent | -
bc-cc | border-color: currentcolor | -
bs-* | border-style: * | -
border | border:1px solid | -
border-* | border: * | px
r-* | border-radius: * | px
round | border-radius:9999px | -
round-* | border-radius: * | px
sharp | border-radius:0 | -
outline
token | output | unit
outline-* | outline: * | px
fill
token | output | unit
fill-* | fill: * | -
fill-0 | fill: #000 | -
fill-f | fill: #fff | -
fill-tp | fill: transparent | -
fill-cc | fill: currentcolor | -
stroke
token | output | unit
stroke-* | stroke: * | -
stroke-0 | stroke: #000 | -
stroke-f | stroke: #fff | -
stroke-tp | stroke: transparent | -
stroke-cc | stroke: currentcolor | -
appearance
token | output | unit
unappearance | appearance:none | -
unapp | appearance:none | -
scale
token | output | unit
scale-* | scale: * | -
flip | scale:-1 -1 | -
flip-* | scale: * | -
flip-x | scale: -1 1 | -
flip-y | scale: 1 -1 | -
rotate
token | output | unit
rotate-* | rotate: * | deg
translate
token | output | unit
translate-* | translate: * | px
transform
token | output | unit
skew-* | transform: skew(*) | deg
skew-x-* | transform: skewX(*) | deg
skew-y-* | transform: skewY(*) | deg
tf-* | transform: * | -
tf-scale-* | transform: scale(*) | -
tf-scale-3d-* | transform: scale3d(*) | -
tf-scale-x-* | transform: scaleX(*) | -
tf-scale-y-* | transform: scaleY(*) | -
tf-scale-z-* | transform: scalez(*) | -
tf-rotate-* | transform: rotate(*) | deg
tf-rotate-3d-* | transform: rotate3d(*) | -
tf-rotate-x-* | transform: rotateX(*) | deg
tf-rotate-y-* | transform: rotateY(*) | deg
tf-rotate-z-* | transform: rotateZ(*) | deg
tf-translate-* | transform: translate(*) | px
tf-translate-3d-* | transform: translate3d(*) | px
tf-translate-x-* | transform: translateX(*) | px
tf-translate-y-* | transform: translateY(*) | px
tf-translate-z-* | transform: translateZ(*) | px
tf-skew-* | transform: skew(*) | deg
tf-skew-x-* | transform: skewX(*) | deg
tf-skew-y-* | transform: skewY(*) | deg
upper | text-transform:uppercase | -
uppercase | text-transform:uppercase | -
lower | text-transform:lowercase | -
lowercase | text-transform:lowercase | -
capit | text-transform:capitalize | -
capitalize | text-transform:capitalize | -
overflow
token | output | unit
clamp-* | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: * | -
over-* | overflow: * | -
over-x-* | overflow-x: * | -
over-y-* | overflow-y: * | -
overflow-* | overflow: * | -
overflow-x-* | overflow-x: * | -
overflow-y-* | overflow-y: * | -
inset
token | output | unit
inset-* | inset: * | -
inset-x-* | left: *; right: * | -
inset-y-* | top: *; bottom: * | -
start-* | inset-inline-start: * | -
end-* | inset-inline-end: * | -
width
token | output | unit
w-* | width: * | px
w-full | width: 100% | -
w-half | width: 50% | -
w-min | width: min-content | -
w-fit | width: fit-content | -
w-max | width: max-content | -
w-screen | width: 100vw | -
sq-* | width: *; height: * | px
sq-full | width: 100%; height: 100% | -
max-w-* | max-width: * | px
max-w-full | max-width: 100% | -
max-w-half | max-width: 50% | -
max-w-min | max-width: min-content | -
max-w-fit | max-width: fit-content | -
max-w-max | max-width: max-content | -
max-w-screen | max-width: 100vw | -
min-w-* | min-width: * | px
min-w-full | min-width: 100% | -
min-w-half | min-width: 50% | -
min-w-min | min-width: min-content | -
min-w-fit | min-width: fit-content | -
min-w-max | min-width: max-content | -
min-w-screen | min-width: 100vw | -
sw-* | stroke-width: * | px
height
token | output | unit
h-* | height: * | px
h-full | height: 100% | -
h-half | height: 50% | -
h-min | height: min-content | -
h-fit | height: fit-content | -
h-max | height: max-content | -
h-screen | height: 100vh | -
max-h-* | max-height: * | px
max-h-full | max-height: 100% | -
max-h-half | max-height: 50% | -
max-h-min | max-height: min-content | -
max-h-fit | max-height: fit-content | -
max-h-max | max-height: max-content | -
max-h-screen | max-height: 100vh | -
min-h-* | min-height: * | px
min-h-full | min-height: 100% | -
min-h-half | min-height: 50% | -
min-h-min | min-height: min-content | -
min-h-fit | min-height: fit-content | -
min-h-max | min-height: max-content | -
min-h-screen | min-height: 100vh | -
lh-* | line-height: * | -
display
token | output | unit
d-* | display: * | -
d-inblock | display: inline-block | -
d-inflex | display: inline-flex | -
d-ingrid | display: inline-grid | -
table | display:table | -
table-* | display: table-* | -
inline | display:inline | -
block | display:block | -
inblock | display:inline-block | -
inflex | display:inline-flex | -
ingrid | display:inline-grid | -
hide | display:none | -
hidden | display:none | -
flex | display:flex | -
position
token | output | unit
pos-* | position: * | -
static | position:static | -
abs | position:absolute | -
absolute | position:absolute | -
rel | position:relative | -
relative | position:relative | -
sticky | position:sticky | -
fixed | position:fixed | -
fit-top | object-position:top | -
fit-bottom | object-position:bottom | -
fit-center | object-position:center | -
fit-left | object-position:left | -
fit-left-* | object-position: left * | -
fit-right | object-position:right | -
fit-right-* | object-position: right * | -
bg-pos-* | background-position: * | -
bg-pos-x-* | background-position-x: * | -
bg-pos-y-* | background-position-y: * | -
bgp-* | background-position: * | -
bgp-x-* | background-position-x: * | -
bgp-y-* | background-position-y: * | -
fullscreen | position:absolute;left:0;top:0;width:100%;height:100% | -
transition
token | output | unit
transition-* | transition: * | ms
time-* | transition: * | ms
user
token | output | unit
select-* | user-select: * | -
object
token | output | unit
fit-* | object-fit: * | -
object-* | object-fit: * | -
object-top | object-position:top | -
object-bottom | object-position:bottom | -
object-center | object-position:center | -
object-left | object-position:left | -
object-left-* | object-position: left * | -
object-right | object-position:right | -
object-right-* | object-position: right * | -
background
token | output | unit
bg-0 | background-color:#000 | -
bg-* | background: * | -
bg-tp | background-color:transparent | -
bg-cc | background-color:currentcolor | -
bg-f | background-color:#fff | -
bg-fixed | background-attachment:fixed | -
bg-local | background-attachment:local | -
bg-scroll | background-attachment:scroll | -
bg-clip-border | background-clip:border-box | -
bg-clip-padding | background-clip:padding-box | -
bg-clip-content | background-clip:content-box | -
bg-clip-text | background-clip:text | -
bg-origin-border | background-origin:border-box | -
bg-origin-padding | background-origin:padding-box | -
bg-origin-content | background-origin:content-box | -
grad-* | background: linear-gradient(*) | deg
color
token | output | unit
c-* | color: * | -
c-0 | color: #000 | -
c-f | color: #fff | -
c-tp | color: transparent | -
c-cc | color: currentcolor | -
accent-* | accent-color: * | -
accent-0 | accent-color: #000 | -
accent-f | accent-color: #fff | -
accent-tp | accent-color: transparent | -
accent-cc | accent-color: currentcolor | -
caret-* | caret-color: * | -
caret-0 | caret-color: #000 | -
caret-f | caret-color: #fff | -
caret-tp | caret-color: transparent | -
caret-cc | caret-color: currentcolor | -
scroll
token | output | unit
snap-x | scroll-snap-type:x mandatory | -
snap-y | scroll-snap-type:y mandatory | -
snap-start | scroll-snap-align:start | -
snap-center | scroll-snap-align:center | -
snap-end | scroll-snap-align:end | -
snap-stop | scroll-snap-stop: always | -
box
token | output | unit
shadow-box-* | box-shadow: * | px
shadow-box | box-shadow:3px 4px 3px #0000004d | -
box-* | box-sizing: * | -
box-content | box-sizing: content-box | -
box-border | box-sizing: border-box | -
box-decoration-* | box-decoration-break: * | -
text
token | output | unit
text-* | value is number ? font-size: * : color: * | px
shadow-text-* | text-shadow: * | px
shadow-text | text-shadow:3px 4px 3px #0000004d | -
ta-* | text-align: * | -
underline | text-decoration:underline | -
td-* | text-decoration: * | px
td-line | text-decoration: underline | -
text-100 | font-weight:100 | -
text-200 | font-weight:200 | -
text-300 | font-weight:300 | -
text-400 | font-weight:400 | -
text-500 | font-weight:500 | -
text-600 | font-weight:600 | -
text-700 | font-weight:700 | -
text-800 | font-weight:800 | -
text-900 | font-weight:900 | -
text-nowrap | white-space: nowrap | -
text-light | font-weight:300 | -
text-regular | font-weight:400 | -
text-medium | font-weight:500 | -
text-semibold | font-weight:600 | -
text-bold | font-weight:700 | -
text-extrabold | font-weight:800 | -
text-tp | color:transparent!important | -
text-thin | font-weight:lighter | -
text-normal | font-weight:normal | -
text-bolder | font-weight:bolder | -
text-italic | font-style: italic | -
text-delete | text-decoration-line:line-through | -
text-deleted | text-decoration-line:line-through | -
text-line | text-decoration-line:underline | -
text-underline | text-decoration-line:underline | -
text-overline | text-decoration-line:overline | -
text-up | text-transform:uppercase | -
text-upper | text-transform:uppercase | -
text-low | text-transform:lowercase | -
text-lower | text-transform:lowercase | -
text-cap | text-transform:capitalize | -
text-capit | text-transform:capitalize | -
text-center | text-align:center | -
text-left | text-align:left | -
text-right | text-align:right | -
text-justify | text-align:justify | -
text-mono | font-family:var(--font-mono) | -
text-serif | font-family:var(--font-serif) | -
text-sans | font-family:var(--font-sans) | -
text-vertical | writing-mode:vertical-lr | -
text-wrap | word-wrap:break-word | -
text-dots | overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100% | -
text-cols-* | columns: * | -
text-lh-* | line-height: * | -
text-wg-* | font-weight: * | -
text-font-* | font-family: * | -
text-align-* | vertical-align: * | -
text-space-* | white-space: * | -
text-shadow | text-shadow:3px 3px 2px #0000004d | -
text-shadow-* | text-shadow: * | px
text-stroke-* | -webkit-text-stroke: * | px
text-break-* | word-break: * | -
text-break-all | word-break: break-all | -
text-break-keep | word-break: keep-all | -
cursor
token | output | unit
cursor-* | cursor: * | -
pointer | cursor:pointer | -
resize
token | output | unit
resize-* | resize: * | -
resize-x | resize: horizontal | -
resize-y | resize: vertical | -
top
token | output | unit
top-* | top: * | px
bottom
token | output | unit
bottom-* | bottom: * | px
left
token | output | unit
left-* | left: * | px
aspect
token | output | unit
ratio-* | aspect-ratio: * | -
float
token | output | unit
float-* | float: * | -
clear
token | output | unit
clear-* | clear: * | -
clear-x | clear: horizontal | -
clear-y | clear: vertical | -
z
token | output | unit
z-* | z-index: * | -
visibility
token | output | unit
visible | visibility:visible | -
invisible | visibility:hidden | -
collapse | visibility:collapse | -
opacity
token | output | unit
opacity-* | opacity: * | -
op-* | opacity: * | -
mix
token | output | unit
blend-* | mix-blend-mode: * | -
filter
token | output | unit
hue-* | filter: hue-rotate(*) | deg
invert | filter:invert(1) | -
invert-* | filter: invert(*) | -
blur-* | filter: blur(*) | px
brightness-* | filter: brightness(*) | -
contrast-* | filter: contrast(*) | -
saturate-* | filter: saturate(*) | -
grayscale-* | filter: grayscale(*) | %
sepia-* | filter: sepia(*) | %
isolation
token | output | unit
isolate | isolation:isolate | -
isolation-* | isolation: * | -
white
token | output | unit
ws-* | white-space: * | -
list
token | output | unit
list-* | list-style: * | -
list-item | display:list-item | -
letter
token | output | unit
spacing-* | letter-spacing: * | px
font
token | output | unit
fs-* | font-size: * | px
fsz-* | font-size: * | px
fst-* | font-style: * | -
italic | font-style:italic | -
fw-* | font-weight: * | -
extrathin | font-weight:100 | -
thin | font-weight:200 | -
light | font-weight:300 | -
regular | font-weight:400 | -
medium | font-weight:500 | -
semibold | font-weight:600 | -
bold | font-weight:700 | -
extrabold | font-weight:800 | -
fv-* | font-variant: * | -
ff-* | font-family: * | -
ff-sans | font-family: var(--font-sans) | -
ff-serif | font-family: var(--font-serif) | -
ff-mono | font-family: var(--font-mono) | -
word
token | output | unit
wb-* | word-break: * | -
wb-all | word-break: break-all | -
wb-keep | word-break: keep-all | -
break-* | word-break: * | -
break-all | word-break: break-all | -
break-keep | word-break: keep-all | -
break
token | output | unit
break-after-* | break-after: * | -
break-before-* | break-before: * | -
break-inside-* | break-inside: * | -
flex
token | output | unit
flex-* | value is number ? gap: * : flex: * | px
flex-1 | flex: 1 1 0% | -
flex-auto | flex: 1 1 auto | -
flex-initial | flex: 0 1 auto | -
flex-center | justify-content:center;align-items:center | -
flex-col | flex-direction:column | -
flex-col-rev | flex-direction:column-reverse | -
flex-row | flex-direction:row | -
flex-row-rev | flex-direction:row-reverse | -
flex-space | justify-content:space-between;align-items:center | -
flex-evenly | justify-content:space-evenly;align-items:center | -
flex-around | justify-content:space-around;align-items:center | -
flex-wrap | flex-wrap:wrap | -
flex-wrap-rev | flex-wrap:wrap-reverse | -
flex-nowrap | flex-wrap:nowrap | -
flex-stretch | align-items:stretch | -
flex-start | justify-content:flex-start | -
flex-start-top | justify-content:flex-start;align-items:flex-start | -
flex-start-center | justify-content:flex-start;align-items:center | -
flex-start-bottom | justify-content:flex-start;align-items:flex-end | -
flex-end | justify-content:flex-end | -
flex-end-top | justify-content:flex-end;align-items:flex-start | -
flex-end-center | justify-content:flex-end;align-items:center | -
flex-end-bottom | justify-content:flex-end;align-items:flex-end | -
flex-top | align-items:flex-start | -
flex-top-start | justify-content:flex-start;align-items:flex-start | -
flex-top-center | justify-content:center;align-items:flex-start | -
flex-top-end | justify-content:flex-end;align-items:flex-start | -
flex-bottom | align-items:flex-end | -
flex-bottom-start | justify-content:flex-start;align-items:flex-end | -
flex-bottom-center | justify-content:center;align-items:flex-end | -
flex-bottom-end | justify-content:flex-end;align-items:flex-end | -
col | flex-direction:column | -
col-rev | flex-direction:column-reverse | -
row | flex-direction:row | -
row-rev | flex-direction:row-reverse | -
basis-* | flex-basis: * | -
grow | flex-grow:1 | -
grow-* | flex-grow: * | -
shrink | flex-shrink:1 | -
shrink-* | flex-shrink: * | -
grid
token | output | unit
col-* | grid-column: * | -
col-span-* | grid-column: span * / span * | -
col-span-full | grid-column:1 / -1 | -
col-start-* | grid-column-start: * | -
col-end-* | grid-column-end: * | -
row-* | grid-row: * | -
row-span-* | grid-row: span * / span * | -
row-span-full | grid-row:1 / -1 | -
row-start-* | grid-row-start: * | -
row-end-* | grid-row-end: * | -
flow-* | grid-auto-flow: * | -
flow-col | grid-auto-flow: column | -
flow-col-dense | grid-auto-flow: column dense | -
flow-row dense | grid-auto-flow: row dense | -
auto-cols-* | grid-auto-columns: * | -
auto-cols-min | grid-auto-columns: min-content | -
auto-cols-max | grid-auto-columns: max-content | -
auto-cols-fr | grid-auto-columns: minmax(0,1fr) | -
auto-rows-* | grid-auto-rows: * | -
auto-rows-min | grid-auto-rows: min-content | -
auto-rows-max | grid-auto-rows: max-content | -
auto-rows-fr | grid-auto-rows: minmax(0,1fr) | -
grid | display:grid | -
grid-cols-* | grid-template-columns: repeat(*,1fr) | -
grid-rows-* | grid-template-rows: repeat(*,1fr) | -
gap
token | output | unit
gap-* | gap: * | px
gap-x-* | column-gap: * | px
gap-y-* | row-gap: * | px
justify
token | output | unit
jc-* | justify-content: * | -
jc-c | justify-content: center | -
jc-bl | justify-content: baseline | -
jc-s | justify-content: start | -
jc-e | justify-content: end | -
jc-sb | justify-content: space-between | -
jc-sa | justify-content: space-around | -
jc-se | justify-content: space-evenly | -
ji-* | justify-items: * | -
ji-c | justify-items: center | -
ji-bl | justify-items: baseline | -
ji-s | justify-items: start | -
ji-e | justify-items: end | -
ji-st | justify-items: stretch | -
js-* | justify-self: * | -
js-c | justify-self: center | -
js-bl | justify-self: baseline | -
js-s | justify-self: start | -
js-e | justify-self: end | -
js-st | justify-self: stretch | -
align
token | output | unit
ac-* | align-content: * | -
ac-c | align-content: center | -
ac-bl | align-content: baseline | -
ac-s | align-content: start | -
ac-e | align-content: end | -
ac-sb | align-content: space-between | -
ac-sa | align-content: space-around | -
ac-se | align-content: space-evenly | -
ai-* | align-items: * | -
ai-c | align-items: center | -
ai-bl | align-items: baseline | -
ai-s | align-items: start | -
ai-e | align-items: end | -
ai-st | align-items: stretch | -
as-* | align-self: * | -
as-c | align-self: center | -
as-bl | align-self: baseline | -
as-s | align-self: start | -
as-e | align-self: end | -
as-st | align-self: stretch | -
order
token | output | unit
order-* | order: * | -
order-first | order: -9999 | -
order-last | order: 9999 | -
order-none | order: 0 | -