# Utility classes

Harmonia ships a curated subset of Tailwind utility classes. **Only the classes listed on this page are compiled into `harmonia.css` and exist at runtime.** A Tailwind class that is not listed here - for example `h-80`, `gap-20`, or `bg-red-450` - is NOT available and does nothing. When you need a value that has no matching class, use an inline `style` instead of guessing a class name.

This list is generated from `src/styles/harmonia.css` (the Tailwind safelist), so it is exhaustive and authoritative.

## Modifiers

- **Negative:** the negated forms that ship are listed explicitly in the sections below with the `-` already shown (for example `-translate-x-4`). No other class accepts a leading `-`.

### Important (`!`)

Append `!` to raise the specificity so the class wins (for example `w-full!`, `p-4!`). The `!` suffix is available on exactly these classes and no others:

```
font-bold font-extrabold font-light font-medium font-mono font-normal font-sans font-semibold font-serif gap-1 gap-10 gap-11 gap-12 gap-2 gap-3 gap-4 gap-5 gap-6 gap-7 gap-8 gap-9 h-1 h-1/2 h-10 h-11 h-12 h-2 h-3 h-4 h-5 h-6 h-7 h-8 h-9 h-auto h-fit h-full h-max h-min h-screen leading-4 leading-5 leading-6 leading-7 leading-8 leading-none leading-normal leading-relaxed leading-snug leading-tight m-0 m-1 m-10 m-11 m-12 m-2 m-3 m-4 m-5 m-6 m-7 m-8 m-9 mb-0 mb-1 mb-10 mb-11 mb-12 mb-2 mb-3 mb-4 mb-5 mb-6 mb-7 mb-8 mb-9 ml-0 ml-1 ml-10 ml-11 ml-12 ml-2 ml-3 ml-4 ml-5 ml-6 ml-7 ml-8 ml-9 ml-auto mr-0 mr-1 mr-10 mr-11 mr-12 mr-2 mr-3 mr-4 mr-5 mr-6 mr-7 mr-8 mr-9 mr-auto mt-0 mt-1 mt-10 mt-11 mt-12 mt-2 mt-3 mt-4 mt-5 mt-6 mt-7 mt-8 mt-9 mx-0 mx-1 mx-10 mx-11 mx-12 mx-2 mx-3 mx-4 mx-5 mx-6 mx-7 mx-8 mx-9 my-0 my-1 my-10 my-11 my-12 my-2 my-3 my-4 my-5 my-6 my-7 my-8 my-9 p-0 p-1 p-10 p-11 p-12 p-2 p-3 p-4 p-5 p-6 p-7 p-8 p-9 pb-0 pb-1 pb-10 pb-11 pb-12 pb-2 pb-3 pb-4 pb-5 pb-6 pb-7 pb-8 pb-9 pl-0 pl-1 pl-10 pl-11 pl-12 pl-2 pl-3 pl-4 pl-5 pl-6 pl-7 pl-8 pl-9 pl-auto pr-0 pr-1 pr-10 pr-11 pr-12 pr-2 pr-3 pr-4 pr-5 pr-6 pr-7 pr-8 pr-9 pr-auto pt-0 pt-1 pt-10 pt-11 pt-12 pt-2 pt-3 pt-4 pt-5 pt-6 pt-7 pt-8 pt-9 px-0 px-1 px-10 px-11 px-12 px-2 px-3 px-4 px-5 px-6 px-7 px-8 px-9 py-0 py-1 py-10 py-11 py-12 py-2 py-3 py-4 py-5 py-6 py-7 py-8 py-9 size-1 size-10 size-11 size-12 size-2 size-3 size-4 size-5 size-6 size-7 size-8 size-9 size-fit size-full text-2xl text-2xs text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl text-base text-lg text-sm text-xl text-xs w-1 w-1/10 w-1/2 w-1/3 w-1/4 w-1/5 w-10 w-11 w-12 w-2 w-2/3 w-2/5 w-3 w-3/4 w-3/5 w-4 w-4/5 w-5 w-6 w-7 w-8 w-9 w-9/10 w-auto w-fit w-full w-max w-min w-screen
```

### Responsive prefixes

A breakpoint prefix works ONLY on the classes listed under it - prefixing any other class does nothing. Write it before the class (for example `md:grid-cols-3`, `lg:w-1/2`, `max-md:rounded-none`). Responsive variants are available for exactly these classes and no others.

`sm:` `md:` `lg:` `xl:` apply at that breakpoint and up (min-width):

```
block col-end-1 col-end-10 col-end-11 col-end-12 col-end-2 col-end-3 col-end-4 col-end-5 col-end-6 col-end-7 col-end-8 col-end-9 col-span-1 col-span-10 col-span-11 col-span-12 col-span-2 col-span-3 col-span-4 col-span-5 col-span-6 col-span-7 col-span-8 col-span-9 col-start-1 col-start-10 col-start-11 col-start-12 col-start-2 col-start-3 col-start-4 col-start-5 col-start-6 col-start-7 col-start-8 col-start-9 flex flex-col-reverse flex-row-reverse gap-1 gap-10 gap-11 gap-12 gap-2 gap-3 gap-4 gap-5 gap-6 gap-7 gap-8 gap-9 grid-cols-1 grid-cols-10 grid-cols-11 grid-cols-12 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6 grid-cols-7 grid-cols-8 grid-cols-9 hbox hidden m-0 m-1 m-10 m-11 m-12 m-2 m-3 m-4 m-5 m-6 m-7 m-8 m-9 mx-0 mx-1 mx-10 mx-11 mx-12 mx-2 mx-3 mx-4 mx-5 mx-6 mx-7 mx-8 mx-9 my-0 my-1 my-10 my-11 my-12 my-2 my-3 my-4 my-5 my-6 my-7 my-8 my-9 p-0 p-1 p-10 p-11 p-12 p-2 p-3 p-4 p-5 p-6 p-7 p-8 p-9 px-0 px-1 px-10 px-11 px-12 px-2 px-3 px-4 px-5 px-6 px-7 px-8 px-9 py-0 py-1 py-10 py-11 py-12 py-2 py-3 py-4 py-5 py-6 py-7 py-8 py-9 text-2xl text-2xs text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl text-base text-lg text-sm text-xl text-xs vbox w-1/10 w-1/2 w-1/3 w-1/4 w-1/5 w-2/3 w-2/5 w-3/4 w-3/5 w-4/5 w-9/10 w-full
```

`max-sm:` `max-md:` `max-lg:` `max-xl:` apply up to that breakpoint (max-width):

```
rounded-none shadow-none
```

## Harmonia-specific utilities

Unique to Harmonia (not Tailwind):

```
fade-b-2 fade-b-4 fade-b-8 fade-l-2 fade-l-4 fade-l-8 fade-r-2 fade-r-4 fade-r-8 fade-t-2 fade-t-4 fade-t-8 fade-x-2 fade-x-4 fade-x-8 fade-y-2 fade-y-4 fade-y-8 focus-outline focus-ring hbox leading-tight min-size-4 opacity-disabled position-center scrollbar-none tile-auto-lg tile-auto-md tile-auto-sm tile-auto-xl tile-double-lg tile-double-md tile-double-sm tile-double-xl tile-lg tile-md tile-sm tile-xl vbox
```

## Tailwind utility subset

```
*:scale-95 -translate-x-4 -translate-x-full -translate-y-4 -translate-y-full absolute align-middle animate-ping animate-pulse animate-spin aspect-3/2 aspect-square aspect-video backdrop-blur-md backdrop-blur-sm backdrop-blur-xs bg-auto bg-background bg-black bg-blue-500 bg-card bg-contain bg-cover bg-gray-500 bg-green-500 bg-indigo-500 bg-information bg-information-foreground bg-muted bg-muted-foreground bg-negative bg-negative-foreground bg-no-repeat bg-orange-500 bg-pink-500 bg-positive bg-positive-foreground bg-primary bg-primary-foreground bg-purple-500 bg-red-500 bg-repeat bg-repeat-x bg-repeat-y bg-secondary bg-secondary-foreground bg-sidebar bg-teal-500 bg-warning bg-warning-foreground bg-white bg-yellow-500 block border border-0 border-10 border-11 border-12 border-2 border-3 border-4 border-5 border-6 border-7 border-8 border-9 border-b border-background border-border border-dashed border-dotted border-foreground border-information border-information-foreground border-l border-muted border-muted-foreground border-negative border-negative-foreground border-positive border-positive-foreground border-primary border-primary-foreground border-primary/50 border-r border-secondary border-secondary-foreground border-solid border-t border-warning border-warning-foreground border-x border-y bottom-0 box-border capitalize col-end-1 col-end-10 col-end-11 col-end-12 col-end-2 col-end-3 col-end-4 col-end-5 col-end-6 col-end-7 col-end-8 col-end-9 col-span-1 col-span-10 col-span-11 col-span-12 col-span-2 col-span-3 col-span-4 col-span-5 col-span-6 col-span-7 col-span-8 col-span-9 col-start-1 col-start-10 col-start-11 col-start-12 col-start-2 col-start-3 col-start-4 col-start-5 col-start-6 col-start-7 col-start-8 col-start-9 content-around content-between content-center content-end content-evenly content-start content-stretch cursor-crosshair cursor-grab cursor-grabbing cursor-none cursor-not-allowed cursor-pointer cursor-text cursor-wait divide-dashed divide-dotted divide-solid divide-x divide-x-0 divide-x-10 divide-x-11 divide-x-12 divide-x-2 divide-x-3 divide-x-4 divide-x-5 divide-x-6 divide-x-7 divide-x-8 divide-x-9 divide-x-reverse divide-y divide-y-0 divide-y-10 divide-y-11 divide-y-12 divide-y-2 divide-y-3 divide-y-4 divide-y-5 divide-y-6 divide-y-7 divide-y-8 divide-y-9 divide-y-reverse duration-100 duration-200 duration-300 ease-linear ease-out fill-black fill-blue-500 fill-current fill-gray-500 fill-green-500 fill-indigo-500 fill-information fill-information-foreground fill-muted fill-muted-foreground fill-negative fill-negative-foreground fill-none fill-orange-500 fill-pink-500 fill-positive fill-positive-foreground fill-primary fill-primary-foreground fill-purple-500 fill-red-500 fill-secondary fill-secondary-foreground fill-teal-500 fill-warning fill-warning-foreground fill-white fill-yellow-500 fixed flex flex-0 flex-1 flex-auto flex-col flex-col-reverse flex-none flex-row flex-row-reverse flex-wrap float-right font-bold font-extrabold font-light font-medium font-mono font-normal font-sans font-semibold font-serif gap-1 gap-10 gap-11 gap-12 gap-2 gap-3 gap-4 gap-5 gap-6 gap-7 gap-8 gap-9 gap-x-1 gap-x-10 gap-x-11 gap-x-12 gap-x-2 gap-x-3 gap-x-4 gap-x-5 gap-x-6 gap-x-7 gap-x-8 gap-x-9 gap-y-1 gap-y-10 gap-y-11 gap-y-12 gap-y-2 gap-y-3 gap-y-4 gap-y-5 gap-y-6 gap-y-7 gap-y-8 gap-y-9 grid grid-cols-1 grid-cols-10 grid-cols-11 grid-cols-12 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6 grid-cols-7 grid-cols-8 grid-cols-9 group-focus-within:opacity-100 group-hover:opacity-100 h-1 h-1/2 h-10 h-11 h-12 h-2 h-3 h-4 h-5 h-6 h-7 h-8 h-9 h-auto h-dvh h-fit h-full h-lvh h-max h-min h-screen h-svh hidden hidden! hover:bg-muted inline inline-block inline-flex inset-0 italic items-baseline items-center items-end items-start items-stretch justify-around justify-between justify-center justify-end justify-end-safe justify-evenly justify-items-center justify-items-end justify-items-start justify-items-stretch justify-start justify-stretch leading-4 leading-5 leading-6 leading-7 leading-8 leading-none leading-normal leading-relaxed leading-snug left-0 line-clamp-1 line-clamp-2 line-clamp-3 line-clamp-4 line-clamp-5 line-clamp-6 line-through lowercase m-0 m-1 m-10 m-11 m-12 m-2 m-3 m-4 m-5 m-6 m-7 m-8 m-9 max-h-1 max-h-10 max-h-11 max-h-12 max-h-2 max-h-3 max-h-4 max-h-5 max-h-6 max-h-7 max-h-8 max-h-9 max-w-1 max-w-10 max-w-10xl max-w-11 max-w-12 max-w-2 max-w-2xl max-w-2xs max-w-3 max-w-3xl max-w-3xs max-w-4 max-w-4xl max-w-5 max-w-5xl max-w-6 max-w-6xl max-w-7 max-w-7xl max-w-8 max-w-8xl max-w-9 max-w-9xl max-w-auto max-w-dvw max-w-lg max-w-md max-w-screen max-w-sm max-w-xl max-w-xs mb-0 mb-1 mb-10 mb-11 mb-12 mb-2 mb-3 mb-4 mb-5 mb-6 mb-7 mb-8 mb-9 min-h-0 min-h-1 min-h-10 min-h-11 min-h-12 min-h-2 min-h-3 min-h-4 min-h-5 min-h-6 min-h-7 min-h-8 min-h-9 min-w-0 min-w-1 min-w-10 min-w-10xl min-w-11 min-w-12 min-w-2 min-w-2xl min-w-2xs min-w-3 min-w-3xl min-w-3xs min-w-4 min-w-4xl min-w-5 min-w-5xl min-w-6 min-w-6xl min-w-7 min-w-7xl min-w-8 min-w-8xl min-w-9 min-w-9xl min-w-auto min-w-lg min-w-md min-w-sm min-w-xl min-w-xs ml-0 ml-1 ml-10 ml-11 ml-12 ml-2 ml-3 ml-4 ml-5 ml-6 ml-7 ml-8 ml-9 ml-auto motion-reduce:transition-none mr-0 mr-1 mr-10 mr-11 mr-12 mr-2 mr-3 mr-4 mr-5 mr-6 mr-7 mr-8 mr-9 mr-auto mt-0 mt-1 mt-10 mt-11 mt-12 mt-2 mt-3 mt-4 mt-5 mt-6 mt-7 mt-8 mt-9 mx-0 mx-1 mx-10 mx-11 mx-12 mx-2 mx-3 mx-4 mx-5 mx-6 mx-7 mx-8 mx-9 mx-auto my-0 my-1 my-10 my-11 my-12 my-2 my-3 my-4 my-5 my-6 my-7 my-8 my-9 no-underline object-contain object-cover object-fill opacity-0 opacity-100 opacity-25 opacity-50 opacity-75 overflow-auto overflow-hidden overflow-scroll overflow-visible overflow-x-auto overflow-x-hidden overflow-x-scroll overflow-x-visible overflow-y-auto overflow-y-hidden overflow-y-scroll overflow-y-visible p-0 p-1 p-10 p-11 p-12 p-2 p-3 p-4 p-5 p-6 p-7 p-8 p-9 pb-0 pb-1 pb-10 pb-11 pb-12 pb-2 pb-3 pb-4 pb-5 pb-6 pb-7 pb-8 pb-9 pl-0 pl-1 pl-10 pl-11 pl-12 pl-2 pl-3 pl-4 pl-5 pl-6 pl-7 pl-8 pl-9 pl-auto place-content-around place-content-between place-content-center place-content-end place-content-evenly place-content-start place-content-stretch place-items-center place-items-end place-items-start place-items-stretch pr-0 pr-1 pr-10 pr-11 pr-12 pr-2 pr-3 pr-4 pr-5 pr-6 pr-7 pr-8 pr-9 pr-auto pt-0 pt-1 pt-10 pt-11 pt-12 pt-2 pt-3 pt-4 pt-5 pt-6 pt-7 pt-8 pt-9 px-0 px-1 px-10 px-11 px-12 px-2 px-3 px-4 px-5 px-6 px-7 px-8 px-9 py-0 py-1 py-10 py-11 py-12 py-2 py-3 py-4 py-5 py-6 py-7 py-8 py-9 relative resize-none right-0 ring-0 ring-1 ring-2 ring-4 rotate-180 rotate-270 rotate-90 rounded-2xl rounded-3xl rounded-4xl rounded-b-2xl rounded-b-3xl rounded-b-4xl rounded-b-full rounded-b-lg rounded-b-md rounded-b-none rounded-b-sm rounded-b-xl rounded-b-xs rounded-bl-2xl rounded-bl-3xl rounded-bl-4xl rounded-bl-full rounded-bl-lg rounded-bl-md rounded-bl-none rounded-bl-sm rounded-bl-xl rounded-bl-xs rounded-br-2xl rounded-br-3xl rounded-br-4xl rounded-br-full rounded-br-lg rounded-br-md rounded-br-none rounded-br-sm rounded-br-xl rounded-br-xs rounded-control rounded-e-2xl rounded-e-3xl rounded-e-4xl rounded-e-full rounded-e-lg rounded-e-md rounded-e-none rounded-e-sm rounded-e-xl rounded-e-xs rounded-full rounded-lg rounded-md rounded-none rounded-none! rounded-s-2xl rounded-s-3xl rounded-s-4xl rounded-s-full rounded-s-lg rounded-s-md rounded-s-none rounded-s-sm rounded-s-xl rounded-s-xs rounded-sm rounded-t-2xl rounded-t-3xl rounded-t-4xl rounded-t-full rounded-t-lg rounded-t-md rounded-t-none rounded-t-sm rounded-t-xl rounded-t-xs rounded-tl-2xl rounded-tl-3xl rounded-tl-4xl rounded-tl-full rounded-tl-lg rounded-tl-md rounded-tl-none rounded-tl-sm rounded-tl-xl rounded-tl-xs rounded-tr-2xl rounded-tr-3xl rounded-tr-4xl rounded-tr-full rounded-tr-lg rounded-tr-md rounded-tr-none rounded-tr-sm rounded-tr-xl rounded-tr-xs rounded-xl rounded-xs row-span-1 row-span-10 row-span-11 row-span-12 row-span-2 row-span-3 row-span-4 row-span-5 row-span-6 row-span-7 row-span-8 row-span-9 scale-105 scale-95 select-none self-center self-end self-start self-stretch shadow-lg shadow-md shadow-none shadow-none! shadow-sm shadow-xl shadow-xs shrink-0 size-1 size-10 size-11 size-12 size-2 size-3 size-4 size-5 size-6 size-7 size-8 size-9 size-fit size-full sr-only sticky stroke-black stroke-blue-500 stroke-gray-500 stroke-green-500 stroke-indigo-500 stroke-orange-500 stroke-pink-500 stroke-purple-500 stroke-red-500 stroke-teal-500 stroke-white stroke-yellow-500 tabular-nums text-2xl text-2xs text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl text-background text-base text-black text-blue-500 text-center text-ellipsis text-foreground text-gray-500 text-green-500 text-indigo-500 text-information text-information-foreground text-justify text-left text-lg text-muted text-muted-foreground text-negative text-negative-foreground text-nowrap text-orange-500 text-pink-500 text-positive text-positive-foreground text-primary text-primary-foreground text-purple-500 text-red-500 text-right text-secondary text-secondary-foreground text-sidebar-foreground text-sm text-teal-500 text-warning text-warning-foreground text-white text-wrap text-xl text-xs text-yellow-500 top-0 tracking-tight transition-[opacity,scale] transition-all transition-colors transition-opacity transition-shadow transition-transform translate-x-4 translate-x-full translate-y-4 translate-y-full truncate underline uppercase w-1 w-1/10 w-1/2 w-1/3 w-1/4 w-1/5 w-10 w-10xl w-11 w-12 w-2 w-2/3 w-2/5 w-2xl w-2xs w-3 w-3/4 w-3/5 w-3xl w-3xs w-4 w-4/5 w-4xl w-5 w-5xl w-6 w-6xl w-7 w-7xl w-8 w-8xl w-9 w-9/10 w-9xl w-auto w-dvw w-fit w-full w-lg w-lvw w-max w-md w-min w-screen w-sm w-svw w-xl w-xs whitespace-nowrap whitespace-pre whitespace-pre-line whitespace-pre-wrap wrap-anywhere wrap-break-word z-1 z-10 z-50 z-60
```