Style Properties

All standard CSS properties are supported in Tasty and benefit from its syntax sugar: design tokens ($name, #name), custom units (2x, 1r, 1bw), color opacity (#purple.5), auto-calc ((100% - 2x)), and custom functions. Values are parsed through the Tasty engine automatically.

The properties documented below have custom handlers with enhanced syntax. They should be preferred over their raw CSS equivalents because they:

• Provide concise, declarative syntax for common patterns
• Simplify overrides when extending components
• Keep style definitions predictable and composable

Other CSS properties (e.g. opacity, transform, cursor, position, zIndex) are passed through with standard Tasty value parsing but no special handler logic.

Recommended Props

Use these instead of their raw CSS counterparts:

Layout

display

Standard CSS display values. Handled together with hide, textOverflow, overflow, and whiteSpace for priority resolution.

textOverflow

Text truncation with optional multi-line clamping.

Syntax: [ellipsis|clip] or [ellipsis|clip] / [lines]

Explicit whiteSpace overrides the default white-space set by textOverflow.

flow

Unified direction control for flex and grid layouts.

Syntax: [direction] [wrap|dense]

flow="row wrap"       // flex: row wrap
flow="column dense"   // grid: column dense
flow="column"         // flex: column; or grid: column

gap

Spacing between child elements. Adapts to layout type.

Syntax: [row-gap] or [row-gap column-gap]

For flex/grid layouts, outputs native gap. For block layouts, emulates gap using margin on children based on flow direction.

padding

Element padding with directional modifiers and multi-group support. Use comma-separated groups to set a base value and then override specific directions.

Syntax: [value] | [top right] | [top right bottom left] | [value directions...] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

Later comma-separated groups override earlier groups for conflicting directions.

Individual props paddingTop, paddingRight, paddingBottom, paddingLeft, paddingBlock, paddingInline are supported but padding with modifiers is recommended.

Priority: padding < paddingBlock/paddingInline < paddingTop/paddingRight/paddingBottom/paddingLeft

margin

Element margin. Same syntax, modifiers, and multi-group support as padding.

Syntax: [value] | [top right] | [top right bottom left] | [value directions...] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

Later comma-separated groups override earlier groups for conflicting directions.

Individual props marginTop, marginRight, marginBottom, marginLeft, marginBlock, marginInline are supported but margin with modifiers is recommended.

Priority: margin < marginBlock/marginInline < marginTop/marginRight/marginBottom/marginLeft

width

Element width with min/max control. One, two, or three values set min-width, width, and max-width together.

Positional syntax:

Modifier syntax:

Keywords: stretch, max-content, min-content, fit-content

Separate minWidth and maxWidth props are supported and override values from the width syntax.

height

Element height. Same syntax, modifiers, and positional patterns as width.

Separate minHeight and maxHeight props are supported and override values from the height syntax.

inset

Positioning offsets with directional modifiers and multi-group support. Same directional syntax as padding.

Syntax: [value] | [top right] | [top right bottom left] | [value directions...] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

Later comma-separated groups override earlier groups for conflicting directions.

Individual props top, right, bottom, left, insetBlock, insetInline are supported. When only individual direction props are used (without inset), individual CSS properties are output for correct cascade behavior with state overrides.

Priority: inset < insetBlock/insetInline < top/right/bottom/left

Color & Background

fill

Background color with design token support. Preferred over backgroundColor and background.

Syntax: [color] or [base-color] [overlay-color]

When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. The overlay is only applied when no explicit image or backgroundImage is set.

Related deprecated props: backgroundColor (use fill), background (overrides all background props when set — avoid).

image

Background image. Preferred over backgroundImage.

Syntax: Any CSS background-image value (parsed for token support).

image="url(/path/to/image.png)"
image="linear-gradient(to right, #purple, #danger)"

Other background props (backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip) are supported as separate props with standard Tasty value parsing.

color

Text color with design token support.

Syntax: Color token, CSS color, true, or fallback syntax

When set to a named color token, also sets $current-color and $current-color-{colorSpace} custom properties for downstream use (suffix depends on the configured colorSpace, default oklch).

svgFill

SVG fill color. Same color token syntax as fill and color. Outputs the native CSS fill property.

svgFill="#purple.10"
svgFill="currentColor"

Border & Outline

border

Border shorthand with directional and multi-group support. Use comma-separated groups to set different values per direction — this is the recommended approach for directional borders.

Syntax: [width] [style] [color] [directions...] — comma-separated for multiple groups

Defaults: width = 1bw, style = solid, color = #border

Styles: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Direction modifiers: top, right, bottom, left

Later comma-separated groups override earlier groups for conflicting directions.

radius

Border radius with shape presets and directional modifiers.

Syntax: [value] [modifiers...] | [shape] | true

Shapes:

Direction modifiers: top, right, bottom, left — rounds only the specified corners.

outline

Outline with inline offset support.

Syntax: [width] [style] [color] / [offset]

Defaults: width = 1ow, style = solid, color = #outline

Styles: Same as border (none, dotted, dashed, solid, etc.)

The / separator separates outline from offset. A separate outlineOffset prop is also supported but the slash syntax takes precedence.

shadow

Box shadow. Supports multiple shadows comma-separated.

Syntax: [inset] [x] [y] [blur] [spread] [color]

Multiple shadows: shadow="1x 1x 2x #dark.20, inset 0 0 4x #dark.10"

Typography

preset

Typography preset that sets font-size, line-height, letter-spacing, font-weight, font-style, and text-transform from named design tokens.

Syntax: name, name / modifier, or modifier (shorthand)

Preset names are project-specific (e.g. h1–h6, t1–t4, p1–p4). Register them for autocomplete by augmenting TastyPresetNames.

Use / to separate the preset name from a modifier. When a modifier is used alone (without a name), the preset name defaults to inherit.

Modifiers:

preset="h1"              // heading 1
preset="h2 / strong"     // bold heading 2
preset="t3 / italic"     // italic text 3
preset="t2 / tight"      // text 2 with tight line-height
preset="bold"             // inherit preset with bold (shorthand for "inherit / bold")

Individual typography props (fontSize, lineHeight, letterSpacing, fontWeight, fontStyle, textTransform) can be used alongside preset to override specific values, but using preset alone is recommended.

font

Font family with design-system fallback. Preferred over fontFamily.

fontFamily is supported as a direct pass-through without fallback logic.

Alignment

Use the individual CSS properties (alignItems, alignContent, justifyItems, justifyContent, placeItems, placeContent) for precise control. The shorthands below set both the -items and -content variants to the same value, which is convenient but less flexible.

align

Shorthand that sets both align-items and align-content to the same value.

align="center"
align="flex-start"
align="space-between"

justify

Shorthand that sets both justify-items and justify-content to the same value.

justify="center"
justify="space-between"
justify="flex-end"

place

Shorthand that sets both place-items and place-content to the same value.

place="center"
place="stretch"

Individual props placeContent and placeItems are also available for separate control.

Animation & Transition

transition

Semantic transition names that expand to groups of CSS properties.

Syntax: [name] [timing] [easing] [delay] or [name] [easing] [delay] — comma-separated for multiple transitions.

When easing is provided without a duration, the default timing variable is used automatically.

Semantic names:

Default timing: $transition (or ${name}-transition with $transition fallback per semantic name).

transition="theme 0.3s"
transition="fill 0.2s, radius 0.3s"
transition="fade 0.15s ease-in"
transition="fill ease-in"           // easing without duration (uses default timing)
transition="radius ease-in-out"     // easing keyword only
transition="$$custom-prop 0.3s"     // custom property transition

Recognized easing keywords: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end. CSS easing functions (cubic-bezier(...), steps(...), linear(...)) are also recognized.

If the name is not a semantic name, it is used as a literal CSS property name.

Scrollbar & Overflow

scrollbar

Scrollbar styling using CSS standard properties (scrollbar-width, scrollbar-color, scrollbar-gutter).

Syntax: [width] [modifiers...] [thumb-color] [track-color]

Width values (controls scrollbar-width, default is thin):

Modifiers (controls gutter and overflow behavior):

Colors: Up to 2 color values for thumb and track (optional), applied via scrollbar-color.

Defaults: When no colors are specified, the thumb color comes from var(--scrollbar-thumb-color) and the track color from var(--scrollbar-track-color, transparent). These are not built-in — your design system should define #scrollbar-thumb and #scrollbar-track tokens (e.g. '#text.5' and '#dark-bg'). If neither token is defined, the track falls back to transparent via a CSS fallback, while the thumb has no CSS-level fallback — the browser treats the entire scrollbar-color declaration as invalid and reverts to the platform-default scrollbar appearance.

Note: none takes precedence over all other modifiers and colors. Combining none with other tokens (e.g., "none always #red") produces a warning, and only scrollbar-width: none is applied.

fade

Gradient-based edge fading using CSS masks. Use comma-separated groups to set different widths and colors per direction.

Syntax: [width] [directions...] [#from-color] [#to-color] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

Colors are optional: first = transparent mask start, second = opaque mask end.

Grid Aliases

gridColumns

Alias for grid-template-columns.

gridRows

Alias for grid-template-rows.

gridAreas

Alias for grid-template-areas. Pass-through string value.

gridTemplate

Alias for grid-template. Slash-separated rows/columns with number conversion.