A fork of @unocss/preset-mini
- Use
em
units by default - Fallback values for CSS variables
- i.e.
color-$red|#ff0000
forcolor: var(--red, #ff0000)
property
- i.e.
- Background images
-
bg-image-[…]
forbackground-image
property -
bg-repeat-x
forbackground-repeat: repeat-x
property -
bg-bottom
forbackground-position: bottom
property
-
- Containment
contain-layout
contain-paint
contain-content
- Content visibility
content-visibility-auto
- Object fit
object-cover
object-contain
object-fill
object-scale-down
object-none
- Object position
-
object-top
,object-top-left
, etc
-
- Scroll snap
-
snap-x
,snap-y
,snap-both
, orsnap-none
for direction -
snap-mandatory
orsnap-proximity
for strictness -
snap-start
,snap-end
,snap-center
, orsnap-align-none
for alignment -
snap-normal
orsnap-always
for “snap stops” -
scroll-m-…
andscroll-p-…
for margin/padding
-
- Overscroll behavior
-
no-overscroll
foroverscroll-behavior: contain
property
-
- Scrollbar appearance
-
no-scrollbars
forscrollbar-width: none
and-ms-overflow-style: none
properties
-
- Tabular numbers
-
tabnum
forfont-feature-settings: tnum
property
-
- Line clamping
- i.e.
line-clamp-2
to use-webkit-line-clamp
to limit number of wraps to 2 lines
- i.e.
- Touch actions
-
touch-pan-*
fortouch-action: pan-*
property -
touch-pinch-zoom
fortouch-action: pinch-zoom
property -
touch-auto
fortouch-action: auto
property -
touch-manipulation
fortouch-action: manipulation
property -
touch-none
fortouch-action: none
property
-
- Targeting
<span>
and<a>
descendants- i.e.
span:color-red
forcolor: red
property on all span and anchor tags within the element - When using
em
as the default, this is most useful when you want to set a default font size for text within an element.
- i.e.
- Element-level zooming
-
zoom-5
appliesfont-size: 5em
to all direct children of the element -
zoom-0.5
appliesfont-size: 0.5em
to all direct children of the element - This is great for scaling elements on-the-fly without having to update every
em
value of every descendant.
-
- Targeting attribute values
- i.e.
[data-selected]:color-red
forcolor: red
property if the element has adata-selected
attribute - or
[data-selected="true"]:color-red
forcolor: red
property if the element has adata-selected
attribute with a value oftrue
- i.e.
And probably some other stuff I forgot to list!