We have created a reusable library of responsive padding CSS classes that we can apply to each module.

1. Formula

CSS class formula: p{t|r|b|l|x|y}-{size}

Side

First, we need to decide which sides to add padding. 

Each padding class can be applied to 7 possible sides:

• p = padding all sides
• pt = padding top
• pb =padding bottom
• pl = padding left
• pr = padding right
• px = padding left and right
• py =padding top and bottom

Size

Padding sizes are in rem and are relative to the base font size. Calculation examples:

If the base font size of 16px:

• 1rem equals 16px
• 0.5rem equals 8px
• 2rem equals 32px
• 3rem equals 48px

Available sizes:

2. Examples

Add padding to a single side

CSS class formula: p{t|r|b|l}-{size}

Add horizontal padding

CSS class formula: px-{size}

Add vertical padding

CSS class formula: py-{size}

Add padding to all sides

CSS class formula: p-{size}

3. Responsive

Pre-built padding CSS classes also come with responsive breakpoints. This means we can assign custom padding(s) on mobile, tablet, and desktop.

To activate a specific breakpoint, add the following prefix in front of the padding CSS class you've chosen:

• mb:  for mobile
• tb:     for tablet
• ds:    for desktop

Examples:

• mb:pt-4 ds:pt-8
  Assigns padding-top of 1rem on mobile and 2rem on desktop
• p-4 mb:p-2
  Assigns a padding (all sides) of 1rem in all breakpoints, but turn into 0.5rem on mobile
• pt-4 tb:pt-8 ds:pt-12
  Assigns a padding-top of 1rem in all breakpoints, 2rem in tablet, and 3rem in desktop. 

4. Usage

Add your own padding CSS classes into the Custom Classes field that's available in each Hatch module.

Source: Images are from Tailwind