Utility Classes - Elements Manual

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.

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