utility-first css / v0.1.1grouped syntax / atomic output

BEAMCSS

focused styles / zero scatter

Tailwind's speed, without the class wall.

A utility-first CSS framework with a Rust compiler. Write a repeated variant once and Beam expands it into clean, atomic CSS - nothing ships to the browser but the styles.

grouped variantsRust compilerzero runtime

$npm install beamcss @beamcss/vite

Get started View on GitHub

<button className="rounded-md px-4 py-2 hover:(bg-accent text-on-accent)">

variant grouping

Same output. Half the noise.

Write a variant prefix once and group the utilities it governs. The compiler expands it to identical atomic CSS — less markup, zero runtime overhead.

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

<button class="rounded-md px-4 py-2 bg-accent text-on-accent  hover:( bg-accent+12 shadow-lg scale-105 )">

→ both compile to identical atomic CSS

css-first names

A few names are different — on purpose.

Layout utilities use the underlying CSS property vocabulary instead of Tailwind shorthand. flex-col becomes direction-column, items-center becomes align-center. Once you know the pattern, the CSS spec is your cheat sheet. Full mapping →

Tailwind

<div class="flex flex-col items-centergap-4 p-6 bg-white rounded-lg border border-gray-200  md:flex-row md:justify-between">

Beam

<div class="flex direction-column align-centergap-4 p-6 bg-surface rounded-lg border border-line  tablet:( direction-row justify-between )">

→ same CSS output, semantic color tokens, grouped responsive variant

how it works

Write the grammar. Ship plain CSS.

A small, regular grammar compiles to deduped atomic CSS under cascade layers. Parse → unfold → emit. Nothing runs in the browser.

@layer beam.utilities {
  .flex { display: flex }
  .bg-accent {
    background: var(--color-accent)
  }
  .hover\:\(bg-accent\+12\):hover {
    background: color-mix(
      in oklab,
      var(--color-accent), white 12%
    )
  }
}

Rust coreCompiles in milliseconds via a native napi-rs binding - no subprocess, no cold start.

Zero runtimeOutput is static atomic CSS under cascade layers. No JavaScript ships to the browser.

Composable configTokens, shortcuts, recipes, and presets compose design systems across projects.

Variant grouping

hover:(bg-accent text-on-accent)

Factor a repeated prefix across many utilities - hover, focus, responsive, dark.

Utility grouping

padding:(16 top:24)

Keep related declarations in one clause instead of scattered atoms.

Dynamic values

w-(--w)

Bind a CSS variable at runtime with one stable class. Zero runtime cost.

Up in 60 seconds.

Install, add the plugin, write classes. Beam compiles on every save.

$ npm install beamcss @beamcss/vite

Read the docs →See examples