This is a utility package for @rbxts/react-roblox, providing custom components with compatibility for TailwindCSS classes to Roblox UI components and other utilities.
Install the package with an alias under the rbxts
package:
npm i @rbxts/react-utils@npm:@nico2433/rbxts-react-utils
This package adds custom components that have compatibility with TailwindCSS classes for Roblox UI components. All classes based on pixels will have their passed value multiplied by 4. For example, p-4
will be 16px, just like in Tailwind. Classes should accept custom parameters with or without brackets.
Frame
ImageButton
ImageLabel
ScrollingFrame
TextBox
TextButton
TextLabel
VideoFrame
ViewPortFrame
-
hover
: hover event -
Note: Pseudo classes don't work with all properties that need an extra instance, like flex | padding | corner radius | size constraint
-
a
: sets both x and y anchor points -
ax
: sets x anchor point -
ay
: sets y anchor point
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
-
rounded-3xl
- Note: Selective corner rounding does not work.
border
- Supports all Tailwind base colors.
-
bg
: background -
text
: text -
border
: border
opacity
bg-opacity
text-opacity
image-opacity
-
p
: padding -
px
: padding-left and padding-right -
py
: padding-top and padding-bottom -
pt
: padding-top -
pr
: padding-right -
pb
: padding-bottom -
pl
: padding-left
-
inset
: sets all four inset values -
inset-x
: sets left and right inset values -
inset-y
: sets top and bottom inset values -
top
: top inset value -
right
: right inset value -
bottom
: bottom inset value -
left
: left inset value
-
size
: sets both width and height -
w
: width -
h
: height
-
min-w
: minimum width -
min-h
: minimum height -
max-w
: maximum width -
max-h
: maximum height
-
size-auto
: sets both width and height -
w-auto
: width -
h-auto
: height
hidden
text-auto
text-xs
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-4xl
text-6xl
text-7xl
text-8xl
text-9xl
text-left
text-center
text-right
z
flex
flex-col
flex-row
justify-start
justify-center
justify-end
items-start
items-center
items-end
gap
You can add your custom values for some classes, currently support: colors | borderRadius | borderWidth | size
// Add
CssConfig.addValues("colors", {
primary: {
test: "#9400D3",
}
})
// Replace (This will replace all colors object with your custom)
CssConfig.setValues("colors", {
red: {
50: #fef2f2,
100: #fee2e2,
...values
}
...otherColors
})
To use these classes, simply add them to your components as you would with TailwindCSS, and they will be applied with the corresponding Roblox UI transformations.
Feel free to contribute or raise issues if you find any bugs or have feature requests. Enjoy using @nico2433/rbxts-react-utils
!