Utilities

Thrynd includes comprehensive utility classes for rapid UI development. Use utilities to fine-tune spacing, colors, typography, and more.

Philosophy: Utilities are low-level classes that do one thing well. Combine them with component classes for maximum flexibility.

Margin and padding utilities for consistent spacing throughout your application.

Text, background, and border color utilities for semantic and custom colors.

Font size, weight, alignment, and text utilities for better typography control.

Flexbox, grid, positioning, and display utilities for responsive layouts.

Border width, style, radius, and divide utilities for component styling.

Transform, transition, filter, and animation utilities for interactive elements.

Using Utilities

Utilities follow a predictable naming convention:

m-4 → margin: 1rem

p-6 → padding: 1.5rem

text-xl → font-size: 1.25rem

mt-4 → margin-top: 1rem

px-6 → padding-left & right: 1.5rem

border-t → border-top

md:flex → flex on medium screens+

lg:text-xl → text-xl on large screens+

hover:bg-primary → on hover

focus:ring → on focus