Status reflects whether the upstream Tailwind utility is implemented in rwind. 📌 marks utilities likely to see the most use. Plan markers — ➕ Likely to be ported · ➖ Unlikely to be ported · 🔁 Revisit if needed.
| Project | Description | Status | Plan | Notes |
|---|---|---|---|---|
| 📌 Font family | font-sans, font-serif, font-mono |
✔️ Ported | Maps to FontFace |
|
| 📌 Font weight | font-thin → font-black |
✔️ Ported | Full Tailwind scale | |
| Font style | italic, not-italic |
✔️ Ported | ||
| 📌 Font size | text-xs → text-9xl |
✔️ Ported | ||
| Line height | leading-none → leading-loose, leading-3 → leading-10 |
✔️ Ported | ||
| 📌 Text color | text-{hue}-{shade}, text-white, text-black, text-transparent |
✔️ Ported | Reads full palette | |
| Text alignment | text-left, text-center, text-right, align-top, align-middle, align-bottom |
✔️ Ported | ||
| Text wrap | truncate, text-wrap, text-nowrap |
✔️ Ported | ||
| Text decoration | underline, line-through |
✔️ Ported | Applied via decorate(text, classes), which wraps content in <u> / <s> tags and toggles RichText. Bare classes have no effect — text must flow through decorate() |
|
| Letter spacing | tracking-* |
❌ Not ported | ➖ Unlikely to be ported | TextLabel exposes no letter-spacing property |
| Text transform | uppercase, lowercase, capitalize |
✔️ Ported | Applied via decorate(text, classes), which transforms the string at runtime. Bare classes have no effect — text must flow through decorate() |
|
| 📌 Border radius | rounded, rounded-{none,sm,md,lg,xl,2xl,3xl,full} |
✔️ Ported | Via ::UICorner; rounded-full uses UDim.new(0.5, 0) |
|
| Per-corner radius | rounded-{t,r,b,l,tl,tr,br,bl}-* |
❌ Not ported | 🔁 Revisit if needed | Waiting on TopLeftRadius / TopRightRadius / BottomRightRadius / BottomLeftRadius to ship |
| Border width | border, border-{0,2,4,8} |
✔️ Ported | Uniform — UIStroke has no per-side widths |
|
| 📌 Border color | border-{hue}-{shade}, border-white, border-black |
✔️ Ported | Via ::UIStroke |
|
| Per-side borders | border-{t,r,b,l,x,y}-* |
❌ Not ported | ➖ Unlikely to be ported | UIStroke is uniform on all four edges |
| Border style | border-solid, border-dashed, border-dotted, border-double |
❌ Not ported | ➖ Unlikely to be ported | UIStroke has no stroke pattern |
| Ring width | ring, ring-{0,1,2,4,8} |
✔️ Ported | Shares ::UIStroke with border-* — last rule wins, can't stack |
|
| Ring color | ring-{hue}-{shade}, ring-white, ring-black |
✔️ Ported | Same ::UIStroke collision |
|
| Ring offset | ring-offset-{0,1,2,4,8} |
✔️ Ported | Maps to ::UIStroke.BorderOffset; only takes effect alongside ring-* (Border mode) |
|
| Ring position | ring-inset, ring-outer, ring-center |
✔️ Ported | Maps to ::UIStroke.BorderStrokePosition (Inner/Outer/Center); outer/center are Roblox-only |
|
| Outline | outline-* |
❌ Not ported | ➖ Unlikely to be ported | Would be a third utility colliding on ::UIStroke |
| Drop shadow | shadow, shadow-{none,sm,md,lg,xl,2xl} |
✔️ Ported | Via ::UIShadow; rendering is gated behind a Roblox FFlag — invisible until the engine flag flips |
|
| Shadow color | shadow-{hue}-{shade}, shadow-white, shadow-black |
✔️ Ported | Same FFlag gating | |
| Inner shadow | shadow-inner |
❌ Not ported | ➖ Unlikely to be ported | UIShadow has no inset mode |
| 📌 Spacing | p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*, gap-* |
✔️ Ported | Padding via ::UIPadding (per-side props compose cleanly); gap-* writes ::UIListLayout.Padding. Margin (m-*) skipped — Roblox GuiObject has no margin concept; use parent ::UIPadding or gap-* instead |
|
| 📌 Sizing | size-*, w-*, h-*, min-w-*, min-h-*, max-w-*, max-h-* |
✔️ Ported | size-* writes Size (both axes); w-* / h-* write a single axis and zero the other — combining them collides on Size (last rule wins), so prefer size-* or pair with AutomaticSize. Numeric scale + *-full + fractions (1/2 … 11/12); min-* / max-* go through ::UISizeConstraint (offsets only — Vector2 has no scale axis) |
|
| Layout | hidden, visible, block, overflow-hidden, overflow-visible, pos-*, top-*, left-*, origin-*, auto-* |
✔️ Partial | ➕ More to port | Visible/ClipsDescendants toggles; pos-* writes both axes of Position (scale + offset), top-*/left-* write one axis (collide on Position like Sizing — prefer pos-*); right-*/bottom-* skipped (need element width); origin-{tl,t,tr,l,center,r,bl,b,br} writes AnchorPoint; auto-{none,x,y,xy} writes AutomaticSize. flex/grid still pending |
| 📌 Background color | bg-{hue}-{shade}, bg-white, bg-black, bg-transparent |
✔️ Ported | Writes BackgroundColor3; bg-transparent toggles BackgroundTransparency |
|
| Z-index | z-{0,10,20,30,40,50} |
✔️ Ported | Maps directly to ZIndex; z-auto skipped (no Roblox equivalent) |
|
| Opacity | text-opacity-*, bg-opacity-* |
✔️ Ported | Split into Tailwind v2-style text-opacity-* (TextTransparency) and bg-opacity-* (BackgroundTransparency); scale 0,5,10,20,25,30,40,50,60,70,75,80,90,95,100 |
|
| Effects | blur-*, brightness-* |
❌ Not ported | ➖ Unlikely to be ported | Roblox post-effects live on Lighting, not GuiObject |
| Project | Description | Notes |
|---|---|---|
| 📌 Named font families | font-builder, font-builder-ext, font-roboto, font-roboto-condensed, font-roboto-mono, font-source-sans, font-nunito, font-montserrat, font-oswald, font-josefin, font-titillium, font-jura, font-michroma, font-inconsolata, font-arimo, font-accanthis, font-roman-antique, font-balthazar, font-bangers, font-fredoka, font-luckiest, font-sarpanch, font-denk, font-amatic, font-creepster, font-highway, font-grenze, font-special-elite, font-press-start, font-comic, font-indie-flower, font-kalam, font-patrick-hand, font-permanent-marker, font-fondamento, font-guru |
Roblox-specific font roster on top of font-sans / font-serif / font-mono |
text-scaled |
Toggles TextScaled = true |
Roblox-specific text-fill behavior with no upstream Tailwind equivalent |
rich-text |
Toggles RichText = true |
Enables <b>, <i>, <u>, etc. inline markup in Roblox text |
stroke-contextual / stroke-border |
Override ::UIStroke.ApplyStrokeMode — Contextual adapts per element type (per-glyph on text), Border always draws a rectangle around the element box |
Lets you escape the implicit mode baked into border-* (Contextual) and ring-* (Border) |
The full Tailwind v3 color palette ships out of the box: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose — each with shades 50 → 950. Every color utility (text-*, border-*, ring-*, shadow-*) reads from the same palette.