• Calendar
  • Maps

Global Modifiers

Global modifiers are modifiers that can apply to any element. We’ve separated them out into sections—as there are a few of them.

Text

Modifier Effect
--text-left Aligns text left
--text-center Aligns text center
--text-right Aligns text right
--text-light Sets text color to a light gray
--text-dark Sets text color to a dark gray that is nearly black
--text-primary Sets text color to the primary color of the current theme

Padding

Modifier Effect
--padding-none Removes padding from an element.
--padding-less Sets padding to 50% of the standard. (.5rem).
--padding-norm Sets padding to be the standard. (1rem)
--padding-more Sets padding to be 50% more than the standard. (1.5rem)
--padding-most Sets padding to be 100% more than the standard. (2rem)
--padding-x-none Removes horizontal padding from an element.
--padding-x-less Sets horizontal padding to 50% of the standard. (.5rem).
--padding-x-norm Sets horizontal padding to be the standard. (1rem)
--padding-x-more Sets horizontal padding to be 50% more than the standard. (1.5rem)
--padding-x-most Sets horizontal padding to be 100% more than the standard. (2rem)
--padding-y-none Removes vertical padding from an element.
--padding-y-less Sets vertical padding to 50% of the standard. (.5rem).
--padding-y-norm Sets vertical padding to be the standard. (1rem)
--padding-y-more Sets vertical padding to be 50% more than the standard. (1.5rem)
--padding-y-most Sets vertical padding to be 100% more than the standard. (2rem)

Margin

Modifier Effect
--margin-none Removes margin from an element.
--margin-less Sets margin to 50% of the standard. (.5rem).
--margin-norm Sets margin to be the standard. (1rem)
--margin-more Sets margin to be 50% more than the standard. (1.5rem)
--margin-most Sets margin to be 100% more than the standard. (2rem)
--margin-x-none Removes horizontal margin from an element.
--margin-x-less Sets horizontal margin to 50% of the standard. (.5rem).
--margin-x-norm Sets horizontal margin to be the standard. (1rem)
--margin-x-more Sets horizontal margin to be 50% more than the standard. (1.5rem)
--margin-x-most Sets horizontal margin to be 100% more than the standard. (2rem)
--margin-y-none Removes vertical margin from an element.
--margin-y-less Sets vertical margin to 50% of the standard. (.5rem).
--margin-y-norm Sets vertical margin to be the standard. (1rem)
--margin-y-more Sets vertical margin to be 50% more than the standard. (1.5rem)
--margin-y-most Sets vertical margin to be 100% more than the standard. (2rem)

Background Colors

Modifier Effect
--bg-primary Sets background to the primary color of the current theme.
--bg-primary-lighter-[1-6] Sets background to a progressively lighter shade of the primary color of the theme.
--bg-primary-darker-[1-4] Sets background to a progressively darker shade of the primary color of the theme.