The same classes the utility reference documents, with the prose
taken out. Filter by a class prefix such as bg-, by the Roblox property a class writes such as
UIStroke or TextSize, or by the family name. Every family heading links back to the section that
explains it.
The runtime pill marks a utility that builds a wrapper, a separator or a loop, which no static
prop can express. Margins, divide-*, animate-* and every variant prefix move the element onto
the runtime path, even inside a
plain string literal. Filter to just those to see what a class list is costing you.
174 rows across 29 families. Every family links to its section in the reference.
Color
ColorA theme color key or an arbitrary[#hex], plus an optional /N opacity modifier that lowers to whichever transparency channel the family owns.bg-{color}theme color key, [#hex]BackgroundColor3 + BackgroundTransparencytext-{color}theme color key, [#hex]TextColor3 + TextTransparencyFallback branch of text-*image-{color}theme color key, [#hex]ImageColor3 + ImageTransparencyplaceholder-{color}theme color key, [#hex]PlaceholderColor3No transparency channelborder-{color}theme color key, [#hex]UIStroke.Color + UIStroke.TransparencyHelper instancering-{color}outline-{color}theme color key, [#hex]UIStroke.Color + UIStroke.TransparencySame UIStroke as border-*shadow-{color}theme color key, [#hex]UIShadow.ColorHelper instancedivide-{color}theme color key, [#hex]runtimeseparator
BackgroundColor3 + BackgroundTransparencyfrom-{color}via-{color}to-{color}theme color key, [#hex]UIGradient.Color keypoints + UIGradient.TransparencyHelper instanceBorder, ring, and outline
Borders & effectsAll three families write into a single sharedUIStroke helper instance, so they do not stack — on a collision the later token wins.borderUIStroke.Thickness = 1Bare formborder-{n}0, 1, 2, 4UIStroke.ThicknessNo other numbers; use border-[3px]border-transparentUIStroke.Transparency = 1border-{join}round, bevel, miterUIStroke.LineJoinModeborder-{color}theme color key, [#hex]UIStroke.Color, Transparency = 0ringUIStroke.Thickness = 3Also sets ApplyStrokeMode = Borderring-{n}0, 1, 2, 4, 8UIStroke.ThicknessoutlineUIStroke.Thickness = 2Also sets ApplyStrokeMode = Borderoutline-noneoutline-hiddenUIStroke.Thickness = 0border-[{n}]ring-[{n}]outline-[{n}]pixels, with or without the unitUIStroke.ThicknessArbitrary value, since 0.7.0. A bracket is read as a color firstRadius
Borders & effectsA pure lookup intheme.radius — there is no numeric fallback, so a value off the scale has to be bracketed. A directional form squares off the corners it does not name.roundedUICorner.CornerRadiusThe theme's DEFAULT radius, 4px by defaultrounded-{key}any key in theme.radiusUICorner.CornerRadiusPure theme lookuprounded-[{n}]pixels, percentUICorner.CornerRadiusArbitrary value, since 0.7.0rounded-t-{key}rounded-b-{key}any key in theme.radius, or a bracketed valueUICorner.TopLeftRadius + TopRightRadius, BottomLeftRadius + BottomRightRadiusSince 0.13.0. The other pair is squared to 0rounded-l-{key}rounded-r-{key}any key in theme.radius, or a bracketed valueUICorner.TopLeftRadius + BottomLeftRadius, TopRightRadius + BottomRightRadiusSince 0.13.0. The other pair is squared to 0rounded-tl-{key}rounded-tr-{key}rounded-bl-{key}rounded-br-{key}any key in theme.radius, or a bracketed valueThe one matching
UICorner radius propertySince 0.13.0. Beats rounded-{key} on the corner it names, in either orderShadow
Borders & effectsSix presets on aUIShadow helper instance, each a fixed blur / offset / spread / transparency.shadowUIShadow presetblur 3, offset Y 1, spread 0, transparency 0.9shadow-smUIShadow preset2 / 1 / 0 / 0.95shadow-mdUIShadow preset6 / 4 / −1 / 0.9shadow-lgUIShadow preset15 / 10 / −3 / 0.9shadow-xlUIShadow preset25 / 20 / −5 / 0.9shadow-2xlUIShadow preset50 / 25 / −12 / 0.75shadow-noneUIShadow.Enabled = falseshadow-{color}theme color key, [#hex]UIShadow.Colorshadow-transparent instead sets Transparency = 1shadow-inner—
unsupported-shadow-insetGradient
ColorStops flush into aColorSequence on a UIGradient helper, and the element's BackgroundColor3 is forced to white so the gradient is not tinted.bg-gradient-to-{dir}t, tr, r, br, b, bl, l, tlUIGradient.RotationRotations 270, 315, 0, 45, 90, 135, 180, 225bg-linear-to-{dir}samesameAccepted alias
from-{color}via-{color}to-{color}theme color key, [#hex]UIGradient.ColorZ-index
LayoutSix presets, and a bracket for everything they do not cover. There is noz-auto and no negative form.z-{n}0, 10, 20, 30, 40, 50ZIndexExactly these sixz-[{n}]any non-negative integerZIndexArbitrary value, since 0.7.0Padding
SpacingAll of it writes into a singleUIPadding helper instance, so p-4 px-8 produces one instance and not two.p-{key}spacing valuePaddingTop, PaddingRight, PaddingBottom, PaddingLeftpx-{key}spacing valuePaddingLeft, PaddingRightpy-{key}spacing valuePaddingTop, PaddingBottompt-{key}spacing valuePaddingToppr-{key}spacing valuePaddingRightpb-{key}spacing valuePaddingBottompl-{key}spacing valuePaddingLeftMargin
SpacingRoblox has no margin box, so a positive margin is a transparent wrapper frame — which is why the whole family is runtime-structural.gap-* on the parent is the cheaper answer.m-{key}spacing valueruntimemargin box, all four sides
mx-{key}my-{key}spacing valueruntimemargin box, one axis
mt-{key}mr-{key}mb-{key}ml-{key}spacing valueruntimemargin box, one side
-mt-{key}-ml-{key}spacing valuePosition shiftNegative top/left margins move, not wrap-mr-{key}-mb-{key}—
unsupported-negative-marginmx-autoAnchorPoint.X = 0.5, Position.X = 0.5 scaleStatic — centers without a wrappermy-autoAnchorPoint.Y = 0.5, Position.Y = 0.5 scaleStaticGap and space
SpacingUIListLayout has one padding axis, so there is no gap-x-/gap-y- — space-x-* and space-y-* are the same property with a fill direction attached.gap-{key}spacing valueUIListLayout.PaddingNo gap-x- or gap-y-space-x-{key}spacing valueUIListLayout.Padding + FillDirection = Horizontalspace-y-{key}spacing valueUIListLayout.Padding + FillDirection = VerticalDivideruntime
SpacingSeparator frames inserted between the content children. They are list items themselves, so the parent'sgap-* applies on both sides of each one.divide-xdivide-y1px separators between children, horizontal / vertical
divide-x-{n}divide-y-{n}0, 1, 2, 4, 8separator thickness
divide-{color}theme color key, [#hex]separator
BackgroundColor3Size
Sizingw- and h- merge into one Size, and the emitted form follows the values — offsets give UDim2.fromOffset, scales give UDim2.fromScale, a mix gives the full UDim2.w-{value}px, full, fractions, spacing offsetsSize X componentMerges with h-h-{value}px, full, fractions, spacing offsetsSize Y componentMerges with w-size-{value}px, full, fractions, spacing offsetsboth axes
basis-{value}px, full, fractions, spacing offsetsSize X componentEffectively w-* regardless of fill directionw-autow-fitAutomaticSize = Enum.AutomaticSize.Xh-autoh-fitAutomaticSize = Enum.AutomaticSize.Ysize-autosize-fitAutomaticSize = Enum.AutomaticSize.XYAlso when both axes are setConstraints
SizingOffset-only, on aUISizeConstraint helper. An axis you leave out defaults to 0 for MinSize and math.huge for MaxSize.min-w-{key}spacing offsetUISizeConstraint.MinSize Xmin-h-{key}spacing offsetUISizeConstraint.MinSize Ymax-w-{key}spacing offsetUISizeConstraint.MaxSize Xmax-h-{key}spacing offsetUISizeConstraint.MaxSize YPosition
LayoutNone of these take effect under a parent that has aUIListLayout — any flex, gap-*, or space-* on the parent owns child positions.left-{value}px, full, fractions, spacing offsetsPosition Xtop-{value}samePosition Yright-{value}samePosition X, from the far edgeright-2 is new UDim(1, -8)bottom-{value}samePosition Y, from the far edgeinset-{value}sameboth axes
-left-{value}-top-{value}-inset-{value}samenegated
Anchor
LayoutThe nineAnchorPoint positions. Anything outside them is unsupported-anchor-value.origin-{key}top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-rightAnchorPointEmitted as new Vector2(x, y)Flex layout
Flexbox & gridAUIListLayout helper instance. justify-* and items-* name the Roblox layout's horizontal and vertical axes, not the flex main and cross axes — they do not swap under flex-col.flexFillDirection = Enum.FillDirection.HorizontalBare form. Every form also sets SortOrder = LayoutOrderflex-rowFillDirection = Enum.FillDirection.Horizontalflex-colFillDirection = Enum.FillDirection.Verticalflex-wrapWraps = trueflex-nowrapWraps = falsejustify-startjustify-centerjustify-endHorizontalAlignment = Left, Center, Rightjustify-betweenjustify-aroundjustify-evenlyHorizontalFlex = Enum.UIFlexAlignment.SpaceBetween, SpaceAround, SpaceEvenlyDifferent propertyitems-startitems-centeritems-endVerticalAlignment = Top, Center, Bottomjustify-stretchHorizontalFlex = Enum.UIFlexAlignment.FillDifferent property. Since 0.12.7items-stretchVerticalFlex = Enum.UIFlexAlignment.FillDifferent propertycontent-{start,center,end}VerticalAlignmentcontent-{between,around,evenly,stretch}VerticalFlexFlex items
Flexbox & gridAUIFlexItem helper instance on the child. There is no grow-{n} and no shrink-{n}.flex-1FlexMode = Enum.UIFlexMode.Fillflex-autoFlexMode = Enum.UIFlexMode.Fillflex-initialFlexMode = Enum.UIFlexMode.Shrinkflex-noneFlexMode = Enum.UIFlexMode.NonegrowFlexMode = Enum.UIFlexMode.Growgrow-0FlexMode = Enum.UIFlexMode.NoneshrinkFlexMode = Enum.UIFlexMode.Shrinkshrink-0FlexMode = Enum.UIFlexMode.Noneself-{auto,start,center,end,stretch}ItemLineAlignmentGrid
Flexbox & gridUIGridLayout stamps CellSize onto every child, so the column count decides the track width. No spans, no templates.gridUIGridLayout child, SortOrder = LayoutOrdergrid-cols-{n}1–12FillDirection = Horizontal, FillDirectionMaxCells = n, CellSize.Xgrid-rows-{n}1–12FillDirection = Vertical, FillDirectionMaxCells = n, CellSize.Yauto-rows-{n}spacing scale, arbitraryCellSize.YCross axis of grid-cols-*auto-cols-{n}spacing scale, arbitraryCellSize.XCross axis of grid-rows-*Order
Flexbox & gridLayoutOrder, which only decides anything under a layout that sorts by it — Vela's own do, a layout instance you wrote keeps Roblox's default of sorting by name.order-{n}-order-{n}any integerLayoutOrderorder-firstLayoutOrder = -9999order-lastLayoutOrder = 9999order-noneLayoutOrder = 0Aspect ratio
SizingAUIAspectRatioConstraint helper instance.aspect-squareUIAspectRatioConstraint.AspectRatio = 1aspect-videoAspectRatio = 1.7777777778aspect-[W/H]positive finite numbersAspectRatioArbitrary valueaspect-[N]positive finite numberAspectRatioArbitrary valueaspect-auto—
unsupported-aspect-valueTransform
Transforms & motionFixed scales, noscale-x-*/scale-y-*. translate-* splits by value kind: a fraction lowers to AnchorPoint, a pixel value to the Position offset.rotate-{deg}-rotate-{deg}0, 1, 2, 3, 6, 12, 45, 90, 180Rotation-rotate-0 stays 0scale-{n}0, 50, 75, 90, 95, 100, 105, 110, 125, 150UIScale.ScaleMaps to 0, 0.5, 0.75, 0.9, 0.95, 1, 1.05, 1.1, 1.25, 1.5translate-x-{v}translate-y-{v}fractions or spacing valuesAnchorPoint or PositionA fraction anchors; a pixel value shiftsEffects
Borders & effectsopacity-* is inverted from Roblox transparency, order-independent, and reaches the whole subtree — a canvasgroup ends the descent.opacity-{n}any integer 0–100Every transparency channel the element paints, and the subtree under itInverted:
opacity-100 is fully opaqueopacity-{n}any integer 0–100GroupTransparency, on a canvasgroupOne composited layer; the fade stops thereMotion
Transforms & motionExecuted byTweenService in the runtime helper. A transition needs a property that actually changes — a variant rule or a dynamic className — or it is dropped.transitionTween property changes caused by variant rules
transition-allTween every property a rule changes
transition-colorsNarrow the tween to the color properties
transition-opacityNarrow the tween to the transparency properties
transition-transformNarrow the tween to
Position, Rotation, UIScaletransition-shadowNarrow the tween to the
UIShadow propertiesSince 0.13.0, when transitions began moving the helper instancestransition-noneDisable tweening
duration-{n}preset 75–1000, or any integer msTween time,
n / 1000 secondsdelay-{n}preset 75–1000, or any integer msTween delay
ease-{linear,in,out,in-out}EasingStyle / EasingDirectionanimate-{spin,pulse,bounce}runtimePreset looping animation
animate-noneNo animation
Typography
TypographyMeaningful ontextlabel, textbutton, and textbox. font-* is one prefix over three axes — weight, family, style — that merge into a single FontFace.text-{size}xs 12, sm 14, base 16, lg 18, xl 20, 2xl 24, 3xl 30, 4xl 36, 5xl 48, 6xl 60, 7xl 72, 8xl 96, 9xl 128TextSizePixel values shownfont-{weight}thin, extralight, light, normal, medium, semibold, bold, extrabold, blackFontFace weight axisnormal is Regular, black is Heavyfont-{family}any key in theme.fontFamily — sans, serif, mono by defaultFontFace family axisThe fallback branch of font-*italicnot-italicFontFace style axisMerges with the weightleading-{key}none 1, tight 1.25, snug 1.375, normal 1.5, relaxed 1.625, loose 2LineHeightNumeric forms are unsupported-line-height-valuetext-lefttext-centertext-rightTextXAlignmenttext-justify—
unsupported-text-alignmentalign-topalign-middlealign-bottomTextYAlignment = Top, Center, Bottomtext-wraptext-nowrapTextWrapped = true, falsewhitespace-normalwhitespace-nowrapTextWrapped = true, falseAlias family; others are unsupported-whitespace-valuetruncateTextTruncate = Enum.TextTruncate.AtEnduppercaselowercasecapitalizenormal-casethe
Text string itselfRewritten at compile time when Text is a literalunderlineline-throughno-underlineRichText markup around
TextBacks off with decoration-on-richtext if you set RichTextImages
LayoutScaleType on imagelabel and imagebutton. object-tile is a Roblox-only extension with no Tailwind counterpart.object-coverScaleType = Enum.ScaleType.Cropobject-containScaleType = Enum.ScaleType.Fitobject-fillScaleType = Enum.ScaleType.Stretchobject-tileScaleType = Enum.ScaleType.TileInteraction
Interactivityoverscroll-* is meaningful only on scrollingframe.pointer-events-noneInteractable = falsepointer-events-autoInteractable = trueoverscroll-autoElasticBehavior = Enum.ElasticBehavior.Alwaysoverscroll-containElasticBehavior = Enum.ElasticBehavior.WhenScrollableoverscroll-noneElasticBehavior = Enum.ElasticBehavior.NeverVisibility
LayoutTheVisible property, both ways.hiddenVisible = falsevisibleVisible = trueOverflow
LayoutClipsDescendants. There is no overflow-auto and no overflow-scroll — that is a scrollingframe and the scrolling families.overflow-hiddenClipsDescendants = trueoverflow-clipClipsDescendants = trueoverflow-visibleClipsDescendants = falseScrolling
InteractivityFour families, all meaningful only onscrollingframe. Tailwind's own scroll-* utilities are a different family and report unsupported-scroll-value.scroll-{x,y,xy}ScrollingDirection = X, Y, XYscroll-noneScrollingEnabled = falseDoes not set a directionscrollbar-w-{n}spacing scale, arbitraryScrollBarThicknessscrollbar-w-2 is 8pxscrollbar-noneScrollBarThickness = 0scrollbar-{color}any color, /N modifierScrollBarImageColor3, ScrollBarImageTransparencycanvas-{auto,auto-x,auto-y,none}AutomaticCanvasSize = XY, X, Y, NoneVariantsruntime
VariantsChained with colons and combined with AND. Any variant-prefixed token forces the runtime helper into the module, literal or not.sm:md:lg:xl:2xl:Viewport width ≥ 640, 768, 1024, 1280, 1536
xl and 2xl since 0.13.0. Every threshold is a theme.screens keymax-sm:max-md:max-lg:max-xl:max-2xl:Viewport width < the same thresholdSince 0.13.0. The exact complement of the bare form, so the two cover every viewport once. Chains, as
md:max-lg:attr-[{Name}={value}]:The styled instance carries that Roblox attributeSince 0.13.0.
addVariant() registers the same condition under a nameportrait:Viewport width less than height
landscape:Viewport width ≥ height
touch:UserInputService.TouchEnabled, and no gamepadmouse:Neither gamepad nor touch
gamepad:UserInputService.GamepadEnabledhover:The pointer is over this element
active:This element is being pressed
focus:This element holds focus or selection
dark:Players.LocalPlayer carries VelaColorScheme = "dark"A class that is not here is one Vela does not compile. The reference page lists what has no Roblox equivalent and why, and Diagnostics explains every warning code named above.
Three things this page cannot flatten into rows, all on the reference.
Color keys and the /N modifier,
arbitrary bracket values, and
which utilities each host element accepts.