Additional CSS Utilities

CSS utilities are a set of classes that provide a consistent and predictable way to layout content on the page.

Typography utilities

CSS class	Description
body-typography	Set font size, line height and font weight. Applicable to any element.

Color utilities

All color utilities are applicable to any element. Default theme is light.

CSS class	Description
body-text	Set text color to primary color
body-background	Set background color to secondary color
text-primary	Set text color to primary color with the default intensity (500)
text-primary-<intensity>	Set text color to primary color with the specified intensity
bg-primary	Set background color to primary color with the default intensity (500)
bg-primary-<intensity>	Set background color to primary color with the specified intensity
border-primary	Set border color to primary color with the default intensity (500)
border-primary-<intensity>	Set border color to primary color with the specified intensity
stroke-primary	Set stroke color to primary color with the default intensity (500)
stroke-primary-<intensity>	Set stroke color to primary color with the specified intensity
fill-primary	Set fill color to primary color with the default intensity (500)
fill-primary-<intensity>	Set fill color to primary color with the specified intensity
text-secondary	Set text color to secondary color with the default intensity (500)
text-secondary-<intensity>	Set text color to secondary color with the specified intensity
bg-secondary	Set background color to secondary color with the default intensity (500)
bg-secondary-<intensity>	Set background color to secondary color with the specified intensity
border-secondary	Set border color to secondary color with the default intensity (500)
border-secondary-<intensity>	Set border color to secondary color with the specified intensity
stroke-secondary	Set stroke color to secondary color with the default intensity (500)
stroke-secondary-<intensity>	Set stroke color to secondary color with the specified intensity
fill-secondary	Set fill color to secondary color with the default intensity (500)
fill-secondary-<intensity>	Set fill color to secondary color with the specified intensity
text-success	Set text color to success color with the default intensity (500)
text-success-<intensity>	Set text color to success color with the specified intensity
bg-success	Set background color to success color with the default intensity (500)
bg-success-<intensity>	Set background color to success color with the specified intensity
border-success	Set border color to success color with the default intensity (500)
border-success-<intensity>	Set border color to success color with the specified intensity
stroke-success	Set stroke color to success color with the default intensity (500)
stroke-success-<intensity>	Set stroke color to success color with the specified intensity
fill-success	Set fill color to success color with the default intensity (500)
fill-success-<intensity>	Set fill color to success color with the specified intensity
text-warning	Set text color to warning color with the default intensity (500)
text-warning-<intensity>	Set text color to warning color with the specified intensity
bg-warning	Set background color to warning color with the default intensity (500)
bg-warning-<intensity>	Set background color to warning color with the specified intensity
border-warning	Set border color to warning color with the default intensity (500)
border-warning-<intensity>	Set border color to warning color with the specified intensity
stroke-warning	Set stroke color to warning color with the default intensity (500)
stroke-warning-<intensity>	Set stroke color to warning color with the specified intensity
fill-warning	Set fill color to warning color with the default intensity (500)
fill-warning-<intensity>	Set fill color to warning color with the specified intensity
text-danger	Set text color to danger color with the default intensity (500)
text-danger-<intensity>	Set text color to danger color with the specified intensity
bg-danger	Set background color to danger color with the default intensity (500)
bg-danger-<intensity>	Set background color to danger color with the specified intensity
border-danger	Set border color to danger color with the default intensity (500)
border-danger-<intensity>	Set border color to danger color with the specified intensity
stroke-danger	Set stroke color to danger color with the default intensity (500)
stroke-danger-<intensity>	Set stroke color to danger color with the specified intensity
fill-danger	Set fill color to danger color with the default intensity (500)
fill-danger-<intensity>	Set fill color to danger color with the specified intensity
text-neutral	Set text color to neutral color with the default intensity (500)
text-neutral-<intensity>	Set text color to neutral color with the specified intensity
bg-neutral	Set background color to neutral color with the default intensity (500)
bg-neutral-<intensity>	Set background color to neutral color with the specified intensity
border-neutral	Set border color to neutral color with the default intensity (500)
border-neutral-<intensity>	Set border color to neutral color with the specified intensity
stroke-neutral	Set stroke color to neutral color with the default intensity (500)
stroke-neutral-<intensity>	Set stroke color to neutral color with the specified intensity
fill-neutral	Set fill color to neutral color with the default intensity (500)
fill-neutral-<intensity>	Set fill color to neutral color with the specified intensity

Color intensity varies from 50 (lightest) to 950 (darkest) (see Color palette).

Padding utilities

CSS class	Description
p-xs	Set padding to xs padding (0.25rem or 4px by default)
p-x-xs	Set left and right padding to xs padding
p-y-xs	Set top and bottom padding to xs padding
p-t-xs	Set top padding to xs padding
p-r-xs	Set right padding to xs padding
p-b-xs	Set bottom padding to xs padding
p-l-xs	Set left padding to xs padding
p-sm	Set padding to sm padding (0.5rem or 8px by default)
p-x-sm	Set left and right padding to sm padding
p-y-sm	Set top and bottom padding to sm padding
p-t-sm	Set top padding to sm padding
p-r-sm	Set right padding to sm padding
p-b-sm	Set bottom padding to sm padding
p-l-sm	Set left padding to sm padding
p-md	Set padding to md padding (0.75rem or 12px by default)
p-x-md	Set left and right padding to md padding
p-y-md	Set top and bottom padding to md padding
p-t-md	Set top padding to md padding
p-r-md	Set right padding to md padding
p-b-md	Set bottom padding to md padding
p-l-md	Set left padding to md padding
p-lg	Set padding to lg padding (1rem or 16px by default)
p-x-lg	Set left and right padding to lg padding
p-y-lg	Set top and bottom padding to lg padding
p-t-lg	Set top padding to lg padding
p-r-lg	Set right padding to lg padding
p-b-lg	Set bottom padding to lg padding
p-l-lg	Set left padding to lg padding
p-xl	Set padding to xl padding (1.5rem or 24px by default)
p-x-xl	Set left and right padding to xl padding
p-y-xl	Set top and bottom padding to xl padding
p-t-xl	Set top padding to xl padding
p-r-xl	Set right padding to xl padding
p-b-xl	Set bottom padding to xl padding
p-l-xl	Set left padding to xl padding

Flexbox utilities

CSS class	Description
f-gap-xs	Set gap to xs gap (0.25rem or 4px by default)
f-gap-sm	Set gap to sm gap (0.5rem or 8px by default)
f-gap-md	Set gap to md gap (0.75rem or 12px by default)
f-gap-lg	Set gap to lg gap (1rem or 16px by default)
f-gap-xl	Set gap to xl gap (1.5rem or 24px by default)

Border radius utilities

CSS class	Description
b-r-none	Disable border radius for the element
b-r-xs	Set border radius to xs border radius (0.1875rem or 3px by default)
b-r-sm	Set border radius to sm border radius (0.25rem or 4px by default)
b-r-md	Set border radius to md border radius (0.375rem or 6px by default)
b-r-lg	Set border radius to lg border radius (0.5rem or 8px by default)
b-r-xl	Set border radius to xl border radius (0.75rem or 12px by default)
b-r-full	Set border radius to full radius (9999px by default)

Animation utilities

CSS class	Description
animate	Activate an animation on the element (sets duration and timing function)
animate-fade-in	Enable fade-in animation
animate-fade-out	Enable fade-out animation
animate-slide-in	Enable slide-in animation
animate-slide-out	Enable slide-out animation
animate-slide-down	Enable slide-down animation
animate-slide-up	Enable slide-up animation
animate-spin	Enable spin animation