← Web to Widget

Support matrix

Status values: Yes (mapped, covered by a test), Approx (mapped with a documented approximation and an info diagnostic), Ignored (accepted, no effect, info diagnostic), No (rejected with a warning). Anything not listed produces CSS007 or TW001.

Elements

ElementStatusUMG
div section main header footer nav aside article form fieldset figure ul ol li p h1-h6 dl dt dd details summary dialog blockquote pre table tr td thYesContainer (Vertical/Horizontal/Wrap/Grid/Scroll Box, Canvas, Overlay) or Text Block when text-only
span a b strong i em u s small code kbd sub sup mark abbr cite q time labelYesInline text run (flattened) or container when styled as a box
brYesLine break in text
button, role="button", input[type=button/submit]YesButton with label or content
imgYesImage (texture imported), object-cover/contain via Scale Box
progressYesProgress Bar
input[type=checkbox/radio]YesCheck Box
input[type=range]YesSlider
input (text, password, email, number, search, ...)YesEditable Text Box
textareaYesMulti-Line Editable Text Box
select / optionYesCombo Box (String)
hrYes1px Border line
svgNo (MAP014)Placeholder Image
video canvas iframe object embed audioApprox (MAP001)Container
scriptIgnored (HTML010)
link rel=stylesheetNo (HTML011)
head title meta style template noscriptConsumed / skipped

Attributes

id, class, style, hidden, disabled, checked, selected, readonly, placeholder, value, min, max, src, width/height on media, role, data-bind, data-event, data-widget, data-loc, data-value, data-checked.

CSS properties

PropertyStatusNotes
display block / inline / inline-block / flex / inline-flex / grid / noneYescontents, table* treated as block/inline-block
position static / relative / absolute / fixed / stickyYesabsolute and fixed anchor to nearest container
top right bottom left insetYespx and percent
z-indexYesCanvas ZOrder
width height min-width min-height max-width max-heightYespx via Size Box; percent via fill weight (MAP004) or anchors
padding*YesBorder padding / Button padding
margin*YesSlot padding; auto centres blocks
overflow overflow-x overflow-yYeshidden clips; scroll/auto becomes Scroll Box
aspect-ratioIgnored (MAP013)
flex-direction flex-wrap justify-content align-items align-self flex-grow flex-shrink flex-basis flex flex-flow orderYesspace-* via Spacers
row-gap column-gap gapYes
grid-template-columns grid-template-rows (repeat(N, ...) or N tracks)Yesequal columns
grid-column grid-row (span N, a / b)Yes
align-content justify-items justify-self place-*Ignored
background-color backgroundYes
background-image: url()Yestexture imported
gradients (linear-gradient, radial-gradient, Tailwind bg-gradient-to-*, bg-linear-*, bg-radial, from via to, from-N% to-N%)YesImage with the plugin's gradient material, matched against Chrome to 1/255: up to three stops with positions, premultiplied sRGB interpolation, angles and corner keywords (CSS corner rule), circle/ellipse with closest/farthest side/corner, rounded corners kept, covers the padding box. More stops: MAP005. Angles/circles need a resolvable px box size: MAP017
opacityYesRenderOpacity
border* (width, style, color, per side)Yesuniform width, max of sides
border-radius (per corner)Yesrounded box brush
box-shadowIgnored (MAP006)
backdrop-filter: blur()Yesnative Background Blur widget with the same radius
visibilityYesHidden
object-fitYesScale Box
colorYes
font-size (px, rem, em, %, keywords)Yesx0.75 to Slate size
font-weightYestypeface Bold at 600+, Light at 300-
font-styleYesItalic typeface
font-familyRecordedone font asset, see --font
line-heightYesLineHeightPercentage
letter-spacingYes1/1000 em
text-alignYes
text-transform uppercase / lowercaseYescapitalize ignored
text-decoration underline / line-throughRecordedstrike supported by UMG, underline not
white-spaceYesnowrap disables wrapping
text-overflowYesellipsis
transition* animation* cursor user-select pointer-events transform filter backdrop-filter outline box-sizingIgnored (CSS009)
custom properties --x, var()Yeswith fallbacks

Selectors

Element, .class, #id, [attr], [attr=value], *, :root, descendant, child >, :hover :focus :active :disabled :focus-visible :focus-within :checked, selector lists. Not supported: +, ~, ::pseudo-elements, :not(), :nth-*, :first-child, nesting, attribute substring matchers.

At-rules

@layer, @supports, @scope (bodies parsed), @media screen/all (parsed), other @media (ignored, CSS002), @theme (tokens), @import (ignored), @keyframes, @font-face (ignored).

Tailwind utilities

Display, flex, grid, gap, space-x/y, padding, margin, sizing (w h size min max, fractions, full screen auto px, arbitrary), position (inset top right bottom left, z), overflow, visibility, aspect, grid-cols grid-rows col-span col-start col-end row-*, background colours with /opacity and arbitrary, bg-gradient-to-* bg-linear-* bg-radial from via to with from-N% via-N% to-N% (native gradient material), opacity, rounded* (all corners and sides, all sizes, arbitrary), border* (widths, sides, colours, styles), shadow* (recorded, ignored on brushes), text-{size} with /{leading}, text-{color}, text-{align}, font-{weight}, font-sans/serif/mono, italic, underline line-through no-underline, uppercase lowercase capitalize normal-case, truncate text-ellipsis text-clip text-nowrap, tracking-*, leading-*, whitespace-*, object-*. Variants: sm md lg xl 2xl against --viewport, hover focus active disabled group-hover, dark with --dark, ! important, - negative. Everything behavioural (transition cursor ring outline animate transform scale rotate translate blur backdrop-* select-* pointer-events-* ...) is accepted and ignored (TW003). Unknown classes are reported (TW001).

Colours

#rgb #rgba #rrggbb #rrggbbaa, rgb() rgba() (comma and slash syntax), hsl() hsla(), oklch() oklab(), 148 named colours, transparent, currentColor, the full Tailwind palette (22 families x 11 shades) plus white black.