Beginner Guide

Table of Content

I. Utility-First Workflow - Basic Grammar

1. Background

When setting a background color, we use

bg-<color>-<number>

Example bg-blue-100

• bg : shortcut of background
• blue : the color we want to use
• 100 : darkness of the color, the greater the number, the dark of the color

2. Padding

When we don’t want an item to take up a whole space, we can set a padding to that item. We use

p-<number>

Example p-2

• p : shortcut for padding
• 2 : number of padding we want

Additionally, we can also set a padding direction: left, right, top, bottom