Introduction

Beam is a utility-first CSS framework with a Rust compiler. It gives you Tailwind's authoring speed with one key improvement: variant grouping lets you factor repeated prefixes out of your markup, so class strings read as grouped intent instead of repetitive soup. Everything compiles to deduped atomic CSS under cascade layers - zero runtime cost.

Coming from Tailwind?Most of Beam reads exactly like Tailwind. The exceptions are a handful of layout utilities that use CSS property names instead of shorthand: flex-col → direction-column, items-* → align-*, grid-cols-* → cols-*. See the full Tailwind comparison →

The idea

The same hover state in Tailwind repeats the prefix on every utility. In Beam, the prefix lives once and the group expands at build time to identical atomic CSS.

Tailwind vs Beam
<!-- Tailwind -->
<button class="rounded-md px-4 py-2 bg-blue-500 text-white hover:bg-blue-700 hover:shadow-lg hover:scale-105">

<!-- Beam - same output, the hover prefix lives once -->
<button class="rounded-md px-4 py-2 bg-accent text-on-accent hover:(bg-accent+12 shadow-lg scale-105)">

What makes it different

  • Variant grouping - hover:(bg-accent text-base) factors a repeated variant across many utilities.
  • Utility grouping - padding:(16 top:24) keeps related declarations in one clause.
  • Config composition - shortcuts, recipes, presets, and tree-shakeable utility modules.
  • Dynamic values - w-(--var) binds a CSS custom property at runtime with one stable atomic class.

Next

Ready to try it? Head to Installation to get a working setup in under a minute, then see Writing styles for the full grammar.