Utilities

Frequently used utilities for customizing Hummingbird React components.

Padding

Utilities for controlling the padding of an element.

Class	Styles
p-<number>	`padding: calc(var(--spacing) * <number>);`
px-<number>	`padding-inline: calc(var(--spacing) * <number>);`
py-<number>	`padding-block: calc(var(--spacing) * <number>);`
ps-<number>	`padding-inline-start: calc(var(--spacing) * <number>);`
pe-<number>	`padding-inline-end: calc(var(--spacing) * <number>);`
pt-<number>	`padding-top: calc(var(--spacing) * <number>);`
pr-<number>	`padding-right: calc(var(--spacing) * <number>);`
pb-<number>	`padding-bottom: calc(var(--spacing) * <number>);`
pl-<number>	`padding-left: calc(var(--spacing) * <number>);`

Margin

Utilities for controlling the margin of an element. Negative values (e.g., -mt-4) and auto (e.g., mx-auto) are also supported.

Class	Styles
m-<number>	`margin: calc(var(--spacing) * <number>);`
mx-<number>	`margin-inline: calc(var(--spacing) * <number>);`
my-<number>	`margin-block: calc(var(--spacing) * <number>);`
ms-<number>	`margin-inline-start: calc(var(--spacing) * <number>);`
me-<number>	`margin-inline-end: calc(var(--spacing) * <number>);`
mt-<number>	`margin-top: calc(var(--spacing) * <number>);`
mr-<number>	`margin-right: calc(var(--spacing) * <number>);`
mb-<number>	`margin-bottom: calc(var(--spacing) * <number>);`
ml-<number>	`margin-left: calc(var(--spacing) * <number>);`
space-x-<number>	Horizontal gap between direct children
space-y-<number>	Vertical gap between direct children

Font family

Utilities for controlling the font family of an element.

Class	Styles
font-sans	`font-family: var(--font-sans);` — 'Figtree', ui-sans-serif, system-ui, sans-serif
font-serif	`font-family: var(--font-serif);` — ui-serif, Georgia, Cambria, Times, serif
font-mono	`font-family: var(--font-mono);` — ui-monospace, SFMono-Regular, Menlo, monospace

Class	Styles
text-xs	`font-size: var(--text-xs);` — 0.75rem (12px)
text-sm	`font-size: var(--text-sm);` — 0.875rem (14px)
text-base	`font-size: var(--text-base);` — 1rem (16px)
text-lg	`font-size: var(--text-lg);` — 1.125rem (18px)
text-xl	`font-size: var(--text-xl);` — 1.25rem (20px)
text-2xl	`font-size: var(--text-2xl);` — 1.5rem (24px)
text-3xl	`font-size: var(--text-3xl);` — 1.875rem (30px)
text-4xl	`font-size: var(--text-4xl);` — 2.25rem (36px)
text-5xl to text-9xl	`font-size: var(--text-5xl);` and larger — 3rem (48px) to 8rem (128px)

Font weight

Utilities for controlling the font weight of an element.

Class	Styles
font-thin	`font-weight: 100;`
font-extralight	`font-weight: 200;`
font-light	`font-weight: 300;`
font-normal	`font-weight: 400;`
font-medium	`font-weight: 500;`
font-semibold	`font-weight: 600;`
font-bold	`font-weight: 700;`
font-extrabold	`font-weight: 800;`
font-black	`font-weight: 900;`

Line height

Utilities for controlling the line height of an element.

Class	Styles
text-<size>/<number>	`font-size: <size>; line-height: calc(var(--spacing) * <number>);`
leading-none	`line-height: 1;`
leading-<number>	`line-height: calc(var(--spacing) * <number>);`

Border radius

Utilities for controlling the border radius of an element. Side-specific variants (rounded-t-*, rounded-s-*, rounded-tl-*, etc.) are also available for every size.

Class	Styles
rounded-xs	`border-radius: var(--radius-xs);` — 0.125rem (2px)
rounded-sm	`border-radius: var(--radius-sm);` — 0.25rem (4px)
rounded-md	`border-radius: var(--radius-md);` — 0.375rem (6px)
rounded-lg	`border-radius: var(--radius-lg);` — 0.5rem (8px)
rounded-xl	`border-radius: var(--radius-xl);` — 0.75rem (12px)
rounded-2xl	`border-radius: var(--radius-2xl);` — 1rem (16px)
rounded-3xl	`border-radius: var(--radius-3xl);` — 1.5rem (24px)
rounded-4xl	`border-radius: var(--radius-4xl);` — 2rem (32px)
rounded-none	`border-radius: 0;`
rounded-full	`border-radius: calc(infinity * 1px);`

PreviousReboot NextContainer