Skip to main content

​
What is rbx-css?

rbx-css is a CSS to Roblox StyleSheet compiler that lets you write standard CSS and automatically converts it to Luau modules or .rbxmx model files that create Roblox StyleSheet instances. Instead of manually creating StyleSheets in Luau, you can leverage the power and familiarity of CSS - complete with design tokens, pseudo-classes, nesting, and modern CSS features.

Installation

Get started with npm, yarn, bun, or pnpm

Quick start

Build your first StyleSheet in under 5 minutes

CSS mapping

Learn how CSS translates to Roblox

CLI reference

Complete command-line interface documentation

​
Why rbx-css?

Familiar syntax

Use standard CSS you already know - selectors, properties, nesting, and more

Design tokens

Define reusable CSS variables that automatically become StyleSheet attributes

Type-safe output

Compile to Luau modules with full type safety for your Roblox projects

Theme support

Built-in dark mode and theme switching with data-theme and media queries

Watch mode

Automatically recompile on file changes during development

Pseudo-instances

CSS properties automatically create UICorner, UIStroke, UIPadding, and more

​
Key features

​
Smart element mapping

HTML elements are automatically mapped to their Roblox equivalents: 
/* CSS */
div { background-color: white; }
button { color: blue; }
span { font-size: 16px; }
Becomes Frame, TextButton, and TextLabel rules in your StyleSheet.

​
Design tokens with CSS variables

Define your design system once, use it everywhere: 
:root {
  --primary: #335fff;
  --radius: 8px;
  --gap: 12px;
}

.card {
  background-color: var(--primary);
  border-radius: var(--radius);
  gap: var(--gap);
}
Tokens are automatically typed as Color3, UDim, number, or string.

​
Automatic pseudo-instances

CSS properties that map to Roblox child instances are automatically handled:
  • border-radius → UICorner
  • border, outline → UIStroke
  • padding → UIPadding
  • display: flex → UIListLayout
  • linear-gradient() → UIGradient
  • transform: scale() → UIScale
  • And more!

​
Modern CSS features

.card {
  background-color: white;

  &:hover {
    background-color: #f0f0f0;
  }

  > span {
    color: gray;
  }
}
CSS pseudo-classes map to Roblox states:
  • :hover → :Hover
  • :active → :Press
  • :focus, :disabled → :NonDefault
Support for child (>), descendant ( ), and more:
.card > span { color: white; }
.container button { margin: 4px; }

​
Output formats

Generates a .luau module that exports a createStyleSheet() factory function: 
rbx-css compile styles.css -o StyleSheet.luau
This is the recommended format for production use.

​
RBXMX model files

Generates a .rbxmx model file for direct import into Roblox Studio: 
rbx-css compile styles.css -o StyleSheet.rbxmx
RBXMX output is currently experimental. The Luau format is recommended for production.

​
Use cases

1

Roblox UI frameworks

Use rbx-css with UI frameworks like rbx-tsx or Fusion to style your components with familiar CSS syntax.
2

Design systems

Build and maintain consistent design systems using CSS variables for colors, spacing, and typography.
3

Theme switching

Implement light/dark modes or multiple themes with built-in theme support.
4

Rapid prototyping

Quickly iterate on UI designs using CSS instead of manually coding StyleSheets.

​
Next steps

Install rbx-css

Set up rbx-css in your project

Follow the quick start

Create your first StyleSheet

Build docs developers (and LLMs) love

Get started for freeTalk to us