Helpers
v13 → v17 change
Most one-off helpers (nm, flex-center, text-center, show--m / hide--m, hide--important, sr-only…) are no longer custom Igloo classes — use Tailwind utilities instead. A handful of Igloo-specific helpers remain, listed below.
Use Tailwind utilities
Reach for Tailwind for spacing, alignment, visibility and typography. Common equivalents to the old helpers:
| Need | Tailwind |
|---|---|
| Remove margin / padding | m-0 / p-0 |
| Centre children | flex items-center justify-center |
| Text alignment | text-left / text-center / text-right |
| Hide an element | hidden |
| Show/hide by breakpoint | hidden md:block, md:hidden, etc. |
| Screen-reader only | sr-only |
Igloo safelists the commonly used utilities (display, items-*, text-*, justify-*, font-*, opacity-*, grid-cols-1–12) so they're always available even when only referenced from CMS content. See the Tailwind documentation.
Igloo-specific helpers
| Class | Purpose |
|---|---|
component | Standard block padding (--component-spacing). Added automatically by <igloo-block-wrap>. |
container, container-sm, container-lg, container-fluid | Centred max-width wrappers — see Layout & grid. |
row | A simple flex row (flex flex-row flex-wrap). |
palette-{key} | Applies a palette's colours (normally set by igloo-block-wrap). |
highlight | Palette highlight background/text — see Typography. |
loading | Loading animation on an element. |
error-color / success-color | Validation text colours — see Forms. |
Images use lazy-loading and an overlay utility is available for media backgrounds; both are applied by the relevant blocks.