← Pablobot

Utility CSS Studio

Compose utility-class strings from a fixed offline subset (Tailwind-like names mapped to plain CSS below). Add extra tokens in the box — unknown classes are ignored for preview and listed as warnings.

Layout

Spacing

Typography

Color & chrome

Extra tokens

Only tokens from the supported subset affect preview; others appear under the sandbox.

Supported token subset

block, flex, inline-flex, grid, flex-row, flex-col, flex-wrap, items-*, justify-*, gap-*, grid-cols-2, grid-cols-3, m-*, mx-auto, p-*, px-4, py-2, text-*, font-*, text-left, text-center, text-default, text-muted, text-white, text-accent, bg-*, border, border-2, rounded-*, shadow-sm, shadow-md, min-h-16, w-full.

Live sandbox

Sample row A — utility classes apply to the dashed box.

Sample row B — edit exports on the left.