Documentation

API Reference

Complete reference for all utility classes.

Class CSS Property
.flex display: flex
.grid display: grid
.hidden display: none
.flex-row / .flex-col flex-direction: row / column
.flex-wrap flex-wrap: wrap
.items-center align-items: center
.justify-center justify-content: center
.justify-between justify-content: space-between
.gap-{size} gap: {size}
Class CSS Property
.grid-cols-{n} grid-template-columns: repeat(n, 1fr)
.col-span-{n} grid-column: span n / span n
Class Description
.w-{size} Width (e.g. w-full, w-1/2)
.h-{size} Height (e.g. h-screen, h-full)
.max-w-{size} Max Width
.min-h-screen min-height: 100vh
Class Properties
.absolute, .relative, .fixed, .sticky position: ...
.top-0, .right-0, .bottom-0, .left-0 Zero offsets
.z-{index} z-index (0, 10, 20... 50)

Generated from config.colors.

Class Description
.text-{color} Sets text color
.bg-{color} Sets background color
.hover:bg-{color} Hover state background
.border-{color} Sets border color
Class Size
.text-xs 0.75rem
.text-sm 0.875rem
.text-base 1rem
.text-lg 1.125rem
.text-xl 1.25rem
.text-2xl 1.5rem
.text-3xl 1.875rem
.font-bold font-weight: 700
.text-center text-align: center
Class Description
.rounded Default border radius (0.25rem)
.rounded-lg Large radius (0.5rem)
.rounded-full Full radius (9999px)
.border 1px solid border
.border-{width} Border width (0, 2, 4, 8)
Class CSS Property
.shadow Box Shadow (Default)
.shadow-lg, .shadow-xl Larger shadows
.opacity-{0-100} Element opacity
.cursor-pointer cursor: pointer

Generated from config.spacing. (e.g., p-4, m-2).

Class Properties
.p-{size} / .m-{size} Padding / Margin (All sides)
.px-{size} / .mx-{size} Horizontal (Left + Right)
.py-{size} / .my-{size} Vertical (Top + Bottom)