# Utility Classes

Every atomic helper in `utilities.css`, grouped by family. These live in
`@layer utilities`, below your app's own CSS, so they beat components and lose
to anything you write.

See `elements man style/utilities` for how to use them.

<!-- GENERATED by tools/styledocs. Do not hand-edit. -->

## bg

`.bg`, `.bg-accent`, `.bg-accent-soft`, `.bg-black`, `.bg-canvas`,
`.bg-danger`, `.bg-danger-soft`, `.bg-info`, `.bg-info-soft`, `.bg-inverse`,
`.bg-muted`, `.bg-panel`, `.bg-soft`, `.bg-success`, `.bg-success-soft`,
`.bg-transparent`, `.bg-warning`, `.bg-warning-soft`, `.bg-white`,
`.hover\:bg-muted`, `.hover\:bg-panel`, `.hover\:bg-soft`

## block

`.block`, `.lg\:block`, `.md\:block`

## border

`.border`, `.border-2`, `.border-accent`, `.border-b`, `.border-danger`,
`.border-l`, `.border-none`, `.border-r`, `.border-soft`, `.border-strong`,
`.border-success`, `.border-t`, `.border-x`, `.border-y`

## col

`.col-span-1`, `.col-span-12`, `.col-span-2`, `.col-span-3`, `.col-span-4`,
`.col-span-6`, `.col-span-full`

## cursor

`.cursor-default`, `.cursor-grab`, `.cursor-grabbing`, `.cursor-help`,
`.cursor-not-allowed`, `.cursor-pointer`, `.cursor-text`, `.cursor-wait`

## flex

`.flex`, `.flex-1`, `.flex-auto`, `.flex-col`, `.flex-col-reverse`,
`.flex-initial`, `.flex-none`, `.flex-nowrap`, `.flex-row`,
`.flex-row-reverse`, `.flex-wrap`, `.lg\:flex`, `.md\:flex`,
`.md\:flex-col`, `.md\:flex-row`

## font

`.font-black`, `.font-bold`, `.font-light`, `.font-medium`, `.font-mono`,
`.font-regular`, `.font-sans`, `.font-semibold`, `.font-serif`, `.font-thin`

## gap

`.gap-0`, `.gap-0-5`, `.gap-1`, `.gap-1-5`, `.gap-10`, `.gap-12`, `.gap-16`,
`.gap-2`, `.gap-2-5`, `.gap-3`, `.gap-4`, `.gap-5`, `.gap-6`, `.gap-8`,
`.gap-px`

## grid

`.grid`, `.grid-cols-1`, `.grid-cols-12`, `.grid-cols-2`, `.grid-cols-3`,
`.grid-cols-4`, `.grid-cols-5`, `.grid-cols-6`, `.lg\:grid`,
`.lg\:grid-cols-3`, `.lg\:grid-cols-4`, `.lg\:grid-cols-6`, `.md\:grid`,
`.md\:grid-cols-2`, `.md\:grid-cols-3`, `.md\:grid-cols-4`,
`.md\:grid-cols-6`

## grow

`.grow`, `.grow-0`

## h

`.h-dvh`, `.h-fit`, `.h-full`, `.h-screen`

## hidden

`.hidden`, `.lg\:hidden`, `.md\:hidden`

## inline

`.inline`, `.inline-block`, `.inline-flex`, `.inline-grid`

## inset

`.inset-0`, `.inset-x-0`, `.inset-y-0`

## items

`.items-baseline`, `.items-center`, `.items-end`, `.items-start`,
`.items-stretch`

## justify

`.justify-around`, `.justify-between`, `.justify-center`, `.justify-end`,
`.justify-evenly`, `.justify-start`

## leading

`.leading-body`, `.leading-loose`, `.leading-none`, `.leading-relaxed`,
`.leading-snug`, `.leading-tight`

## m

`.m-0`, `.m-auto`

## max

`.max-w-2xl`, `.max-w-3xl`, `.max-w-4xl`, `.max-w-5xl`, `.max-w-6xl`,
`.max-w-7xl`, `.max-w-full`, `.max-w-lg`, `.max-w-md`, `.max-w-none`,
`.max-w-prose`, `.max-w-shell`, `.max-w-sm`, `.max-w-wide`, `.max-w-xl`,
`.max-w-xs`

## mb

`.mb-1`, `.mb-12`, `.mb-2`, `.mb-3`, `.mb-4`, `.mb-6`, `.mb-8`

## min

`.min-h-0`, `.min-h-dvh`, `.min-h-screen`, `.min-w-0`

## mt

`.mt-1`, `.mt-10`, `.mt-12`, `.mt-16`, `.mt-2`, `.mt-3`, `.mt-4`, `.mt-6`,
`.mt-8`

## opacity

`.opacity-0`, `.opacity-100`, `.opacity-25`, `.opacity-50`, `.opacity-70`,
`.opacity-75`

## order

`.order-1`, `.order-2`, `.order-3`, `.order-4`, `.order-5`, `.order-6`,
`.order-first`, `.order-last`, `.order-none`

## overflow

`.overflow-auto`, `.overflow-hidden`, `.overflow-scroll`,
`.overflow-visible`, `.overflow-x-auto`, `.overflow-x-hidden`,
`.overflow-y-auto`, `.overflow-y-hidden`

## p

`.p-0`, `.p-1`, `.p-10`, `.p-12`, `.p-16`, `.p-2`, `.p-3`, `.p-4`, `.p-5`,
`.p-6`, `.p-8`

## pointer

`.pointer-events-auto`, `.pointer-events-none`

## px

`.md\:px-12`, `.px-0`, `.px-1`, `.px-10`, `.px-12`, `.px-2`, `.px-3`,
`.px-4`, `.px-5`, `.px-6`, `.px-8`

## py

`.md\:py-24`, `.py-0`, `.py-1`, `.py-10`, `.py-12`, `.py-16`, `.py-2`,
`.py-20`, `.py-24`, `.py-3`, `.py-4`, `.py-5`, `.py-6`, `.py-8`

## rounded

`.rounded-2xl`, `.rounded-3xl`, `.rounded-4xl`, `.rounded-full`,
`.rounded-lg`, `.rounded-md`, `.rounded-none`, `.rounded-sm`, `.rounded-xl`,
`.rounded-xs`

## select

`.select-all`, `.select-auto`, `.select-none`, `.select-text`

## shadow

`.hover\:shadow-lg`, `.hover\:shadow-md`, `.shadow-2xl`, `.shadow-inner`,
`.shadow-lg`, `.shadow-md`, `.shadow-none`, `.shadow-sm`, `.shadow-xl`,
`.shadow-xs`

## shrink

`.shrink`, `.shrink-0`

## text

`.hover\:text-accent`, `.hover\:text-ink`, `.lg\:text-7xl`, `.lg\:text-8xl`,
`.md\:text-4xl`, `.md\:text-5xl`, `.md\:text-6xl`, `.md\:text-7xl`,
`.md\:text-lg`, `.md\:text-xl`, `.text-2xl`, `.text-2xs`, `.text-3xl`,
`.text-4xl`, `.text-5xl`, `.text-6xl`, `.text-7xl`, `.text-8xl`,
`.text-accent`, `.text-accent-deep`, `.text-base`, `.text-black`,
`.text-center`, `.text-current`, `.text-danger`, `.text-info`, `.text-ink`,
`.text-ink-dim`, `.text-ink-faint`, `.text-ink-inverse`, `.text-ink-soft`,
`.text-justify`, `.text-left`, `.text-lg`, `.text-md`, `.text-right`,
`.text-sm`, `.text-success`, `.text-warning`, `.text-white`, `.text-xl`,
`.text-xs`

## tracked

`.tracked-normal`, `.tracked-snug`, `.tracked-tight`, `.tracked-tighter`,
`.tracked-wide`, `.tracked-wider`, `.tracked-widest`

## transition

`.transition`, `.transition-colors`, `.transition-none`,
`.transition-opacity`, `.transition-shadow`, `.transition-transform`

## underline

`.hover\:underline`, `.underline`

## w

`.w-auto`, `.w-fit`, `.w-full`, `.w-screen`

## z

`.z-0`, `.z-10`, `.z-20`, `.z-30`, `.z-40`, `.z-50`, `.z-modal`,
`.z-overlay`, `.z-popover`, `.z-toast`, `.z-tooltip`

## Other

`.absolute`, `.bottom-0`, `.capitalize`, `.contents`, `.fixed`, `.italic`,
`.left-0`, `.lowercase`, `.mx-auto`, `.my-auto`, `.no-underline`,
`.normal-case`, `.not-italic`, `.relative`, `.right-0`, `.size-full`,
`.sr-only`, `.static`, `.sticky`, `.tabular`, `.top-0`, `.uppercase`,
`.visually-hidden`