Classes

While matcha.css is mostly intended to be used along with semantic styling, it still provides a subset of utility classes for added convenience.

Utilities classes

• Text weight, style, decoration, transform, align, and font.
  • .bold sets font-weight: bold;
  • .semibold sets font-weight: 600;
  • .italic sets font-style: italic;
  • .underline sets text-decoration: underline;
  • .strikethrough sets text-decoration: line-through;
  • .uppercase sets text-transform: uppercase;
  • .lowercase sets text-transform: lowercase;
  • .capitalize sets text-transform: capitalize;
  • .centered sets text-align: center;
  • .justified sets text-align: justify;
  • .monospace sets font-family: var(--mono);
• Text size
  • .smaller sets font-size: .85rem;
  • .small sets font-size: .875rem;
  • .normal sets font-size: 1rem;
  • .large sets font-size: 1.25rem;
  • .larger sets font-size: 1.5rem;
• Positioning
  • .relative sets position: relative;
  • .fixed sets position: fixed;
  • .absolute sets position: absolute;
  • .sticky sets position: sticky;
• Display
  • .hidden sets display: none;
  • .inline sets display: inline;
    • &.block sets display: inline-block;
    • &.flex sets display: inline-flex;
  • .block sets display: block;
  • .flex sets display: flex;
    • &.row sets flex-direction: row;
    • &.column sets flex-direction: column;
    • &.wrap sets flex-wrap: wrap;
    • &.no-wrap sets flex-wrap: no-wrap;
    • &.reverse
      • &.row sets flex-direction: row-reverse;
      • &.column sets flex-direction: column-reverse;
      • &.wrap sets flex-wrap: wrap-reverse;
  • .contents sets display: contents;
• Flex display
  • .flex
    • &.start sets justify-content: flex-start;
    • &.end sets justify-content: flex-end;
    • &.center sets justify-content: center;
    • &.space-between sets justify-content: space-between;
    • &.space-around sets justify-content: space-around;
    • &.space-evenly sets justify-content: space-evenly;
    • &.stretch sets justify-content: stretch;
    • &.align-start sets align-items: flex-start;
    • &.align-end sets align-items: flex-end;
    • &.align-center sets align-items: center;
    • &.align-stretch sets align-items: stretch;
  • .grow sets flex-grow: 1;
  • .shrink sets flex-shrink: 1;
• Overflow
  • .overflow sets overflow: auto;
  • .overflow-x sets overflow-x: auto;
  • .overflow-y sets overflow-y: auto;
  • .no-overflow sets overflow: hidden;
• Cursor
  • .pointer sets cursor: pointer;
  • .wait sets cursor: wait;
  • .not-allowed sets cursor: not-allowed;
• User selection
  • .select-all sets user-select: all;
  • .no-select sets user-select: none;
• Interactivity
  • .events sets pointer-events: auto;
  • .no-events sets pointer-events: none;
• Sizing and dimensions
  • .width sets width: 100%;
  • .height sets height: 100%;
  • .border-box sets box-sizing: border-box;
  • .content-box sets box-sizing: content-box;
• Resizing
  • .resize sets resize: both;
  • .resize-x sets resize: horizontal;
  • .resize-y sets resize: vertical;
  • .no-resize sets resize: none;
• Miscellaneous
  • .no-shadow sets box-shadow: none;
  • .shadow sets box-shadow: var(--shadow);
• <svg> fill and stroke
  • svg.fill-current sets fill: currentColor;
  • svg.no-fill sets fill: none;
  • svg.stroke-current sets stroke: currentColor;
  • svg.no-stroke sets stroke: none;

Spacing classes

The following classes are numbered and the following values are supported in place of *:
0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4,

• Margins
  • .m-* sets margin: *rem;
  • .mx-* sets margin-left: *rem; margin-right: *rem;
  • .my-* sets margin-top: *rem; margin-bottom: *rem;
  • .mt-* sets margin-top: *rem;
  • .mb-* sets margin-bottom: *rem;
  • .ml-* sets margin-left: *rem;
  • .mr-* sets margin-right: *rem;
  • &
    • &.spacing-x-* > * + * sets margin-left: *rem;
    • &.spacing-y-* > * + * sets margin-top: *rem;
• Paddings
  • .p-* sets padding: *rem;
  • .px-* sets padding-left: *rem; padding-right: *rem;
  • .py-* sets padding-top: *rem; padding-bottom: *rem;
  • .pt-* sets padding-top: *rem;
  • .pb-* sets padding-bottom: *rem;
  • .pl-* sets padding-left: *rem;
  • .pr-* sets padding-right: *rem;