Back to Schema Browser

Tailwind Utility Schemas

Browse all Tailwind utility schemas and their available options.

Comprehensive list of CSS custom properties (variables) available in PageHub design system. Use with Tailwind arbitrary value syntax: bg-primary

Icon reference using React Icons. Format: ref-icon:IconName

Flex align items

Background color using Tailwind classes or CSS variables

Background opacity

Border width using Tailwind classes or CSS variables

TwBorderColor

Border color using Tailwind classes or CSS variables

TwBorderStyle

Border style

Text color using Tailwind classes or CSS variables

Cursor style

Display type

TwFlexDirection

Flex direction

Font size using Tailwind classes

Font weight

Gap between flex/grid items using Tailwind classes or CSS variables

Gradient direction

TwGradientFrom

Gradient start color

Gradient end color

Height using Tailwind classes

TwJustifyContent

Flex justify content

Horizontal margin

Vertical margin

Maximum width using Tailwind classes or CSS variables

Minimum height

Overflow behavior

Horizontal padding using Tailwind classes or CSS variables

Vertical padding using Tailwind classes or CSS variables

Position type

Border radius using Tailwind classes or CSS variables

Root-level props that are NOT part of className. Styling uses props.className. Root holds animation, rare inline style, pattern/preset/layout keys — see SDK RootStyleProps.

Box shadow using Tailwind classes or CSS variables

Text alignment

Width using Tailwind classes

URL for links. Use '#' as placeholder unless user provides explicit URL.