Skip to main content
/mantle

Shadows

Tokens for defining elevations.

.shadow-inner
.shadow-sm
.shadow
.shadow-md
.shadow-lg
.shadow-xl
.shadow-2xl

Shadows in plain CSS

The shadow tokens are CSS custom properties on :root, so a stylesheet that Tailwind does not process can read them. Use them to match a third-party widget to mantle:

.StripeElement {	box-shadow: var(--shadow-sm);}

The variables resolve against the page theme. Inside an inverted theme island, use a shadow-* utility instead.