Skip to content

CSS utility classes

This section of the documentation is a WIP

API reference

View API reference table
Name Class BPs States Common
Base classes
Appearance .appearance ☑️
Color .c ☑️ ☑️ ☑️
Link color .lc ☑️ ☑️ ☑️
Background color .bgc ☑️ ☑️ ☑️
Background image .bgi ☑️ ☑️
Background position .bgp ☑️ ☑️
Background repeat .bgr ☑️ ☑️
Background size .bgs ☑️ ☑️
Border color .bdc ☑️ ☑️ ☑️
Border style .bds ☑️ ☑️ ☑️
Border width .bdw ☑️ ☑️ ☑️
Border radius .bdr ☑️ ☑️ ☑️
Outline color .lnc ☑️ ☑️
Outline style .lns ☑️ ☑️
Outline width .lnw ☑️ ☑️
Outline offset .lno ☑️ ☑️
Outline .ln ☑️ ☑️
Opacity .o ☑️ ☑️ ☑️
Box shadow .bsh ☑️ ☑️ ☑️
Text shadow .tsh ☑️ ☑️ ☑️
Cursor .cursor ☑️ ☑️
Clip .clip ☑️
Caret color .caret ☑️ ☑️

Class name format

Generated CSS classes have the following format by default:

.state(breakpoint(root-variant:modifier))

Placeholder Description
root Describes what the utility class does
variant Scopes the effect of the utility class
modifier Represents the value of the utility's effect
breakpoint Name of a breakpoint token
state User interaction state (hover, focus, active)

Examples

Base classes

<!-- root-variant:modifier -->
<div class="m-b:xl">

Responsive classes

<!-- breakpoint(root-variant:modifier) -->
<div class="tablet(m-b:2xl)">

Stateful classes

<!-- state(root-variant:modifier) -->
<div class="hover(c:black)">

Stateful, responsive classes

<!-- state(breakpoint(root-variant:modifier)) -->
<div class="hover(tablet(c:white))">