lowcss
v.0.32.0
Docs Theme Utilities Examples GitHub

Utilities Reference

Reference of all utility classes provided by default in LowCSS.
basics

animation

Utilities to animate your elements using predefined CSS animations.
default
Class Properties
animate-*
animation: var(--animate-*)

background-clip

Utilities to set the background-clip property of the element. It defines the area within which the background is painted.
default
Class Properties
bg-border
background-clip: border-box
bg-padding
background-clip: padding-box
bg-content
background-clip: content-box
bg-text
background-clip: text

background-color

Utilities to set the background-color property of the element, which defines the background color of an element.
default
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: odd
pseudo: even
pseudo: group-hover
Class Properties
bg-transparent
background-color: transparent
bg-current
background-color: currentColor
bg-*
background-color: var(--color-*)

background-repeat

Utilities to set the background-repeat property of the element, which defines how background images are repeated.
default
Class Properties
bg-repeat
background-repeat: repeat
bg-no-repeat
background-repeat: no-repeat

background-size

Utilities to set the background-size property of the element.
default
Class Properties
bg-auto
background-size: auto
bg-cover
background-size: cover
bg-contain
background-size: contain

border-radius

Utilities to set the border-radius property of the element.
default
Class Properties
rounded-*
border-radius: var(--radius-*)
rounded-tl-*
border-top-left-radius: var(--radius-*)
rounded-tr-*
border-top-right-radius: var(--radius-*)
rounded-bl-*
border-bottom-left-radius: var(--radius-*)
rounded-br-*
border-bottom-right-radius: var(--radius-*)

border-color

Utilities to set the border-color property of the element.
default
pseudo: hover
pseudo: focus
pseudo: focus-within
Class Properties
border-transparent
border-color: transparent
border-current
border-color: currentColor
border-*
border-color: var(--color-*)

border-width

Utilities to set the border-width property of the element.
default
Class Properties
border-*
border-width: var(--border-width-*)
border-t-*
border-top-width: var(--border-width-*)
border-r-*
border-right-width: var(--border-width-*)
border-b-*
border-bottom-width: var(--border-width-*)
border-l-*
border-left-width: var(--border-width-*)

border-style

Utilities to set the border-style property of the element.
default
Class Properties
border-solid
border-style: solid
border-dashed
border-style: dashed
border-dotted
border-style: dotted
border-none
border-style: none

outline-color

Utilities to set the outline-color property of the element.
default
pseudo: hover
pseudo: focus
pseudo: focus-within
Class Properties
outline-transparent
outline-color: transparent
outline-current
outline-color: currentColor
outline-*
outline-color: var(--color-*)

outline-width

Utilities to set the outline-width property of the element.
default
Class Properties
outline-*
outline-width: var(--border-width-*)

outline-offset

Utilities to set the outline-offset property of the element.
default
Class Properties
outline-offset-*
outline-offset: var(--border-width-*)

outline-style

Utilities to set the outline-style property of the element.
default
Class Properties
outline-solid
outline-style: solid
outline-dashed
outline-style: dashed
outline-dotted
outline-style: dotted
outline-none
outline-style: none

shadow

Utilities to set the box-shadow property of the element.
default
pseudo: hover
pseudo: focus
Class Properties
shadow-*
box-shadow: var(--shadow-*)

opacity

Utilities to set the opacity property of the element.
default
media: responsive
pseudo: group-hover
pseudo: group-focus
pseudo: hover
pseudo: focus
pseudo: focus-within
Class Properties
opacity-*
opacity: var(--opacity-*)

align-content

Utilities to set the align-content property of the element.
default
media: responsive
Class Properties
content-start
align-content: start
content-center
align-content: center
content-end
align-content: end
content-stretch
align-content: stretch
content-between
align-content: space-between
content-around
align-content: space-around
content-evenly
align-content: space-evenly

align-items

Utilities to set the align-items property of the element.
default
media: responsive
Class Properties
items-start
align-items: flex-start
items-center
align-items: center
items-end
align-items: flex-end
items-stretch
align-items: stretch
items-baseline
align-items: baseline

align-self

Utilities to set the align-self property of the element.
default
media: responsive
Class Properties
self-auto
align-self: auto
self-start
align-self: flex-start
self-end
align-self: flex-end
self-center
align-self: center
self-stretch
align-self: stretch
self-baseline
align-self: baseline

flex-direction

Utilities to set the flex-direction property of the element.
default
media: responsive
Class Properties
flex-row
flex-direction: row
flex-col
flex-direction: column
flex-row-reverse
flex-direction: row-reverse
flex-col-reverse
flex-direction: column-reverse

flex-grow

Utilities to set the flex-grow property of the element.
default
media: responsive
Class Properties
grow-0
flex-grow: 0
grow-1
flex-grow: 1

flex-shrink

Utilities to set the flex-shrink property of the element.
default
media: responsive
Class Properties
shrink-0
flex-shrink: 0
shrink-1
flex-shrink: 1

flex-wrap

Utilities to set the flex-wrap property of the element.
default
media: responsive
Class Properties
flex-wrap
flex-wrap: wrap
flex-wrap-reverse
flex-wrap: wrap-reverse
flex-nowrap
flex-wrap: nowrap

gap

Utilities to set the gap property of the element.
default
media: responsive
Class Properties
gap-*
gap: var(--gap-*)

grid-template-columns

Utilities to set the grid-template-columns property of the element.
default
media: responsive
Class Properties
grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr))
grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr))
grid-cols-7
grid-template-columns: repeat(7, minmax(0, 1fr))
grid-cols-8
grid-template-columns: repeat(8, minmax(0, 1fr))
grid-cols-9
grid-template-columns: repeat(9, minmax(0, 1fr))
grid-cols-10
grid-template-columns: repeat(10, minmax(0, 1fr))
grid-cols-11
grid-template-columns: repeat(11, minmax(0, 1fr))
grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr))
grid-cols-none
grid-template-columns: none

grid-template-rows

Utilities to set the grid-template-rows property of the element.
default
media: responsive
Class Properties
grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr))
grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr))
grid-rows-3
grid-template-rows: repeat(3, minmax(0, 1fr))
grid-rows-4
grid-template-rows: repeat(4, minmax(0, 1fr))
grid-rows-5
grid-template-rows: repeat(5, minmax(0, 1fr))
grid-rows-6
grid-template-rows: repeat(6, minmax(0, 1fr))
grid-rows-none
grid-template-rows: none

grid-column

Utilities to set the size and the position of elements in grid columns.
default
media: responsive
Class Properties
col-span-1
grid-column: span 1 / span 1
col-span-2
grid-column: span 2 / span 2
col-span-3
grid-column: span 3 / span 3
col-span-4
grid-column: span 4 / span 4
col-span-5
grid-column: span 5 / span 5
col-span-6
grid-column: span 6 / span 6
col-span-7
grid-column: span 7 / span 7
col-span-8
grid-column: span 8 / span 8
col-span-9
grid-column: span 9 / span 9
col-span-10
grid-column: span 10 / span 10
col-span-11
grid-column: span 11 / span 11
col-span-12
grid-column: span 12 / span 12

grid-row

Utilities to set the size and the position of elements in grid rows.
default
media: responsive
Class Properties
row-span-1
grid-row: span 1 / span 1
row-span-2
grid-row: span 2 / span 2
row-span-3
grid-row: span 3 / span 3
row-span-4
grid-row: span 4 / span 4
row-span-5
grid-row: span 5 / span 5
row-span-6
grid-row: span 6 / span 6
row-span-7
grid-row: span 7 / span 7
row-span-8
grid-row: span 8 / span 8
row-span-9
grid-row: span 9 / span 9
row-span-10
grid-row: span 10 / span 10
row-span-11
grid-row: span 11 / span 11
row-span-12
grid-row: span 12 / span 12

justify-content

Utilities to set the justify-content property of the element.
default
media: responsive
Class Properties
justify-start
justify-content: flex-start
justify-end
justify-content: flex-end
justify-center
justify-content: center
justify-between
justify-content: space-between
justify-around
justify-content: space-around

order

Utilities to set the order property of the element.
default
media: responsive
Class Properties
order-none
order: 0
order-first
order: -999
order-last
order: 999
order-*
order: var(--order-*)

cursor

Utilities to set the cursor property of the element.
default
Class Properties
cursor-auto
cursor: auto
cursor-default
cursor: default
cursor-hand
cursor: pointer
cursor-pointer
cursor: pointer
cursor-move
cursor: move
cursor-none
cursor: none
cursor-zoom-in
cursor: zoom-in
cursor-zoom-out
cursor: zoom-out
cursor-not-allowed
cursor: not-allowed
cursor-wait
cursor: wait
cursor-text
cursor: text
cursor-help
cursor: help
cursor-context-menu
cursor: context-menu
cursor-progress
cursor: progress
cursor-cell
cursor: cell
cursor-crosshair
cursor: crosshair
cursor-vertical-text
cursor: vertical-text
cursor-alias
cursor: alias
cursor-copy
cursor: copy
cursor-no-drop
cursor: no-drop
cursor-grab
cursor: grab
cursor-grabbing
cursor: grabbing
cursor-all-scroll
cursor: all-scroll
cursor-col-resize
cursor: col-resize
cursor-row-resize
cursor: row-resize
cursor-n-resize
cursor: n-resize
cursor-e-resize
cursor: e-resize
cursor-s-resize
cursor: s-resize
cursor-w-resize
cursor: w-resize
cursor-ne-resize
cursor: ne-resize
cursor-nw-resize
cursor: nw-resize
cursor-se-resize
cursor: se-resize
cursor-sw-resize
cursor: sw-resize
cursor-ew-resize
cursor: ew-resize
cursor-ns-resize
cursor: ns-resize
cursor-nesw-resize
cursor: nesw-resize

user-select

Utilities to set the user-select property of the element.
default
Class Properties
select-none
user-select: none
select-none
user-select: none
select-text
user-select: text
select-all
user-select: all
select-auto
user-select: auto

pointer-events

Utilities to set the pointer-events property of the element.
default
Class Properties
pointer-events-auto
pointer-events: auto
pointer-events-none
pointer-events: none

touch-action

Utilities to set the touch-action property of the element.
default
Class Properties
touch-auto
touch-action: auto
touch-none
touch-action: none
touch-pan-x
touch-action: pan-x
touch-pan-y
touch-action: pan-y
touch-pan-left
touch-action: pan-left
touch-pan-right
touch-action: pan-right
touch-pan-up
touch-action: pan-up
touch-pan-down
touch-action: pan-down
touch-pinch-zoom
touch-action: pinch-zoom
touch-manipulation
touch-action: manipulation

bottom

Utilities to set the bottom property of the element.
default
Class Properties
bottom-0
bottom: 0px
bottom-half
bottom: 50%
bottom-full
bottom: 100%

left

Utilities to set the left property of the element.
default
Class Properties
left-0
left: 0px
left-half
left: 50%
left-full
left: 100%

right

Utilities to set the right property of the element.
default
Class Properties
right-0
right: 0px
right-half
right: 50%
right-full
right: 100%

top

Utilities to set the top property of the element.
default
Class Properties
top-0
top: 0px
top-half
top: 50%
top-full
top: 100%

position

Utilities to set the position property of the element.
default
media: responsive
Class Properties
relative
position: relative
absolute
position: absolute
sticky
position: sticky
fixed
position: fixed
initial
position: initial

overflow

Utilities to set the overflow property of the element.
default
Class Properties
overflow-auto
overflow: auto
overflow-scroll
overflow: scroll
overflow-hidden
overflow: hidden
overflow-visible
overflow: visible
overflow-x-auto
overflow-x: auto
overflow-x-scroll
overflow-x: scroll
overflow-x-hidden
overflow-x: hidden
overflow-x-visible
overflow-x: visible
overflow-y-auto
overflow-y: auto
overflow-y-scroll
overflow-y: scroll
overflow-y-hidden
overflow-y: hidden
overflow-y-visible
overflow-y: visible

z-index

Utilities to set the z-index property of the element.
default
Class Properties
z-auto
z-index: auto
z-*
z-index: var(--z-index-*)

display

Utilities to set the display property of the element.
default
media: responsive
media: print
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
Class Properties
hidden
display: none
block
display: block
inline-block
display: inline-block
flex
display: flex
inline-flex
display: inline-flex
grid
display: grid
inline-grid
display: inline-grid
table
display: table
inline-table
display: inline-table
table-row
display: table-row
table-cell
display: table-cell
table-column
display: table-column
table-group
display: table-group
table-header-group
display: table-header-group
table-footer-group
display: table-footer-group
table-column-group
display: table-column-group

float

Utilities to set the float property of the element.
default
Class Properties
float-left
float: left
float-right
float: right
float-start
float: inline-start
float-end
float: inline-end
float-none
float: none

height

Utilities to set the height property of the element.
default
media: responsive
Class Properties
h-screen
height: 100vh
h-*
height: var(--spacing-*)

max-height

Utilities to set the max-height property of the element.
default
media: responsive
Class Properties
max-h-screen
max-height: 100vh
max-h-*
max-height: var(--spacing-*)

min-height

Utilities to set the min-height property of the element.
default
media: responsive
Class Properties
min-h-screen
min-height: 100vh
min-h-*
min-height: var(--spacing-*)

width

Utilities to set the width property of the element.
default
media: responsive
Class Properties
w-auto
width: auto
w-*
width: var(--spacing-*)

max-width

Utilities to set the max-width property of the element.
default
media: responsive
Class Properties
max-w-*
max-width: var(--spacing-*)
max-w-*
max-width: var(--container-*)

min-width

Utilities to set the min-width property of the element.
default
media: responsive
Class Properties
min-w-*
min-width: var(--spacing-*)

margin

Utilities to set the margin property of the element.
default
media: responsive
pseudo: first
pseudo: last
Class Properties
m-*
margin: var(--spacing-*)
mx-*
margin-left: var(--spacing-*)
margin-right: var(--spacing-*)
mx-auto
margin-left: auto
margin-right: auto
my-*
margin-top: var(--spacing-*)
margin-bottom: var(--spacing-*)
ml-*
margin-left: var(--spacing-*)
ml-auto
margin-left: auto
mr-*
margin-right: var(--spacing-*)
mr-auto
margin-right: auto
mt-*
margin-top: var(--spacing-*)
mb-*
margin-bottom: var(--spacing-*)

padding

Utilities to set the padding property of the element.
default
media: responsive
pseudo: first
pseudo: last
Class Properties
p-*
padding: var(--spacing-*)
px-*
padding-left: var(--spacing-*)
padding-right: var(--spacing-*)
py-*
padding-top: var(--spacing-*)
padding-bottom: var(--spacing-*)
pl-*
padding-left: var(--spacing-*)
pr-*
padding-right: var(--spacing-*)
pt-*
padding-top: var(--spacing-*)
pb-*
padding-bottom: var(--spacing-*)

font-family

Utilities to set the font-family property of the element.
default
Class Properties
font-*
font-family: var(--font-family-*)

font-size

Utilities to set the font-size property of the element.
default
media: responsive
Class Properties
text-*
font-size: var(--font-size-*)

font-style

Utilities to set the font-style property of the element.
default
Class Properties
italic
font-style: italic
not-italic
font-style: normal

font-weight

Utilities to set the font-weight property of the element.
default
pseudo: hover
pseudo: group-hover
Class Properties
font-*
font-weight: var(--font-weight-*)

letter-spacing

Utilities to set the letter-spacing property of the element.
default
Class Properties
tracking-*
letter-spacing: var(--tracking-*)

line-height

Utilities to set the line-height property of the element.
default
Class Properties
leading-*
line-height: var(--leading-*)

list-style-position

Utilities to set the list-style-position property of the element.
default
Class Properties
list-inside
list-style-position: inside
list-outside
list-style-position: outside

list-style-type

Utilities to set the list-style-type property of the element.
default
Class Properties
list-none
list-style-type: none
list-disc
list-style-type: disc
list-decimal
list-style-type: decimal

text-align

Utilities to set the text-align property of the element.
default
Class Properties
text-justify
text-align: justify
text-left
text-align: left
text-center
text-align: center
text-right
text-align: right

text-color

Utilities to set the text color of the element.
default
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: group-hover
Class Properties
text-transparent
color: transparent
text-current
color: currentColor
text-*
color: var(--color-*)

text-decoration-line

Utilities to set the text-decoration-line property of the element.
default
pseudo: hover
pseudo: group-hover
Class Properties
strike
text-decoration-line: line-through
underline
text-decoration-line: underline
no-underline
text-decoration-line: none

text-decoration-color

Utilities to set the text-decoration-color property of the element.
default
pseudo: hover
pseudo: group-hover
Class Properties
decoration-transparent
text-decoration-color: transparent
decoration-current
text-decoration-color: currentColor
decoration-*
text-decoration-color: var(--color-*)

text-decoration-style

Utilities to set the text-decoration-style property of the element.
default
pseudo: hover
pseudo: group-hover
Class Properties
decoration-solid
text-decoration-style: solid
decoration-double
text-decoration-style: double
decoration-dotted
text-decoration-style: dotted
decoration-dashed
text-decoration-style: dashed
decoration-wavy
text-decoration-style: wavy

text-decoration-thickness

Utilities to set the text-decoration-thickness property of the element.
default
pseudo: hover
pseudo: group-hover
Class Properties
decoration-auto
text-decoration-thickness: auto
decoration-0
text-decoration-thickness: 0
decoration-1
text-decoration-thickness: 1px
decoration-2
text-decoration-thickness: 2px
decoration-4
text-decoration-thickness: 4px
decoration-8
text-decoration-thickness: 8px

text-underline-offset

Utilities to set the text-underline-offset property of the element.
default
pseudo: hover
pseudo: group-hover
Class Properties
underline-offset-auto
text-underline-offset: auto
underline-offset-0
text-underline-offset: 0
underline-offset-1
text-underline-offset: 1px
underline-offset-2
text-underline-offset: 2px
underline-offset-4
text-underline-offset: 4px
underline-offset-8
text-underline-offset: 8px

text-overflow

Utilities to set the text-overflow property of the element.
default
Class Properties
text-ellipsis
text-overflow: ellipsis
text-clip
text-overflow: clip

text-transform

Utilities to set the text-transform property of the element.
default
Class Properties
capitalize
text-transform: capitalize
uppercase
text-transform: uppercase
lowercase
text-transform: lowercase

vertical-align

Utilities to set the vertical-align property of the element.
default
Class Properties
align-baseline
vertical-align: baseline
align-top
vertical-align: top
align-middle
vertical-align: middle
align-bottom
vertical-align: bottom
align-text-top
vertical-align: text-top
align-text-bottom
vertical-align: text-bottom

blur

utilities to set the filter (blur) property of the element.
default
Class Properties
blur-*
filter: blur(var(--blur-*))

brightness

utilities to set the filter (brightness) property of the element.
default
Class Properties
brightness-*
filter: brightness(var(--brightness-*))

contrast

utilities to set the filter (contrast) property of the element.
default
Class Properties
contrast-*
filter: contrast(var(--contrast-*))

saturate

utilities to set the filter (saturation) property of the element.
default
Class Properties
saturate-*
filter: saturate(var(--saturate-*))