Utilities

Utility classes are very basic rules that modify usually apply 1 or 2 attributes to an element. They are meant to make UI process fast and easy.

Modifier Hierarchy

Most utility classess have modifying attributes that follow this pattern:

<div class="[scope]:[attribute][-direction][-size/color]"></div>

Examples

sm:pad-top-2x 
@media max-width: 719px){
    .pad-top-2x{
        padding-top: 2rem;
    }
}
hover:bg-blue-dark 
.hover:bg-blue-dark:hover{
    background: #0994E2
}