# Vela

> Tailwind-style className compilation for roblox-ts React interfaces.

- Docs: https://docs.astra-void.xyz/vela-rbxts/
- Source: https://github.com/astra-void/vela-rbxts
- Full text: https://docs.astra-void.xyz/vela-rbxts/llms-full.txt
- Every page below is also served as Markdown at its own URL with `.md` appended.

## Overview

- [Vela](https://docs.astra-void.xyz/vela-rbxts/index.md): Tailwind-style className compilation for roblox-ts UI — React or Vide.

## Getting started

- [Installation](https://docs.astra-void.xyz/vela-rbxts/getting-started/installation.md): Packages, the two ways to run Vela, the config file, and the ambient declaration.
- [Your first component](https://docs.astra-void.xyz/vela-rbxts/getting-started/first-component.md): Build a small panel with Vela utilities and read the Roblox properties and helper instances it lowers to.
- [How it works](https://docs.astra-void.xyz/vela-rbxts/getting-started/how-it-works.md): The pipeline end to end, where the transformer and CLI diverge, and the two lowering paths.
- [Scope and status](https://docs.astra-void.xyz/vela-rbxts/getting-started/scope-and-status.md): What Vela covers at 0.13.0, which Tailwind families are permanently out, and where enforcement has gaps.

## Guides

- [Editor setup](https://docs.astra-void.xyz/vela-rbxts/guides/editor-setup.md): The VS Code extension, what the language server provides, and wiring the LSP into any editor.
- [Theming](https://docs.astra-void.xyz/vela-rbxts/guides/theming.md): Expression strings rather than values, the extend-versus-replace rules, rem scaling, and the defaults.
- [Layout and sizing](https://docs.astra-void.xyz/vela-rbxts/guides/layout-and-sizing.md): How the layout, sizing, position and transform utilities lower to Roblox layout instances.
- [Colors and surfaces](https://docs.astra-void.xyz/vela-rbxts/guides/colors-and-surfaces.md): Colour utilities and the Roblox properties they write — fills, strokes, radius, shadows, gradients, opacity.
- [Text and fonts](https://docs.astra-void.xyz/vela-rbxts/guides/text-and-fonts.md): Text sizing, weight, alignment, wrapping and truncation — plus the host restriction the compiler does not actually enforce.
- [Responsive and input variants](https://docs.astra-void.xyz/vela-rbxts/guides/responsive-and-input-variants.md): Every variant prefix, how each condition is detected, and what using one costs.
- [Dynamic class names](https://docs.astra-void.xyz/vela-rbxts/guides/dynamic-class-names.md): Computing `className` loses no utilities. What a genuinely unreadable string costs.
- [Vide](https://docs.astra-void.xyz/vela-rbxts/guides/vide.md): Emitting for Vide — no config to write, the same static output, and a thunk for anything dynamic.
- [Recipes](https://docs.astra-void.xyz/vela-rbxts/guides/recipes.md): Small, complete UI patterns — buttons, badges, meters, list rows, a dialog — compiled and rendered live.
- [Troubleshooting](https://docs.astra-void.xyz/vela-rbxts/guides/troubleshooting.md): A symptom-first map of Vela's failure modes, the silent ones especially.

## Reference

- [Utility reference](https://docs.astra-void.xyz/vela-rbxts/reference/utilities.md): Every utility class, the exact values it accepts, and what it lowers to.
- [Cheat sheet](https://docs.astra-void.xyz/vela-rbxts/reference/cheat-sheet.md): Every utility class on one filterable page — by class, by property, or by lowering path.
- [Configuration](https://docs.astra-void.xyz/vela-rbxts/reference/config.md): How vela.config.ts is found and loaded, the complete theme schema, the built-in defaults, and the tsconfig plugin options.
- [CLI](https://docs.astra-void.xyz/vela-rbxts/reference/cli.md): The `vela` command — lowering a source tree ahead of `rbxtsc`, every flag, and what it costs.
- [Diagnostics](https://docs.astra-void.xyz/vela-rbxts/reference/diagnostics.md): Every diagnostic code, how it reaches your build or editor, and the ones easy to miss.
- [API](https://docs.astra-void.xyz/vela-rbxts/reference/api.md): Everything importable from `vela-rbxts`, the published packages, and the versions it is tested against.
- [Release notes](https://docs.astra-void.xyz/vela-rbxts/reference/release-notes.md): What changed in each Vela release, and the sharp edges still open.