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 ($$negative(10px)). 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] | [block inline] | [top right bottom left] | [value direction...] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

Output modifier: longhand — forces output as individual CSS longhand properties (padding-top, padding-right, padding-bottom, padding-left) instead of the padding shorthand. Useful when children need to selectively inherit individual directions.

One value per directional group. A group that names direction modifiers takes exactly one value, applied to every direction it names. For different values per side, use comma-separated groups: padding: '2x top, 4x right'. Writing padding: '2x 4x top right' ignores 4x and warns in development — the parser keeps values and modifiers in separate buckets, so their interleaving in the source is not recoverable and '2x 4x top right', '2x top 4x right' and 'top 2x right 4x' are all the same input.

A group that names no direction keeps plain CSS shorthand order, which is unambiguous and unchanged.

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] | [block inline] | [top right bottom left] | [value direction...] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

Output modifier: longhand — forces output as individual CSS longhand properties (margin-top, etc.) instead of the margin shorthand.

The one-value-per-directional-group rule from padding applies here too.

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] | [block inline] | [top right bottom left] | [value direction...] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

The one-value-per-directional-group rule from padding applies here too, with dock as the single exception.

dock modifier: pins the named edge and spans its full length, by also applying the value to the two perpendicular sides. inset: 'bottom dock' gives inset: auto 0 0 0 — anchored to the bottom, full width. Without a direction, dock fills every side.

dock is the one place a directional group takes two values: the first insets the named edge, the second the sides it spans. inset: '2x 4x bottom dock' pins the bottom at 2x and insets the sides by 4x. A third value, or a second value without dock, is ignored and warns in development. With several directions the first value applies to each named edge and the second to every side they span.

Output modifier: longhand — forces output as individual CSS properties (top, right, bottom, left) instead of the inset shorthand.

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

Output modifier: longhand — forces output as individual CSS properties (border-top, border-right, border-bottom, border-left) instead of the border shorthand. Useful when children need to selectively inherit individual sides.

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:

Edge modifiers: top, right, bottom, left — rounds the pair of corners along that edge.

Corner modifiers: top-left, top-right, bottom-right, bottom-left — rounds a single corner. Use these when an edge modifier would round one corner too many. Edge and corner modifiers combine (radius: 'top bottom-right').

Output modifier: longhand — forces output as individual CSS longhand properties (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) instead of the border-radius shorthand. Useful when children need to selectively inherit individual corners via radius: 'inherit left'.

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 one or more space-separated modifiers. When modifiers are used alone (without a name), the preset name defaults to inherit. Modifiers can be combined freely because they target different properties.

Modifiers:

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

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] [direction...] [#from-color] [#to-color] — comma-separated for multiple groups

Direction modifiers: top, right, bottom, left

A group that names edges takes a single width, applied to every edge it names — different widths per edge come from comma groups. A group that names no edge covers all four and keeps plain CSS shorthand order, like padding. See the padding rule.

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.