Jetflow

Core capabilities

Everything resolved
at runtime.

Jetflow watches your DOM and generates only the CSS you actually use — in real time, with no compilation step.

01 / UTILITY SYSTEM

Atomic classes,
on demand.

500+ utilities for layout, spacing, color, typography, and effects. Each class maps to a single CSS declaration — composable by design.

flex-centertext-boldp-6gap-4

02 / DARK MODE

Class-based and
media-query both.

Set darkMode: "both" and support class toggles and system preference simultaneously. No extra config needed.

dark:bg-slate-900dark:text-white

03 / THEMING

Extend, don't
replace.

Pass a config with custom colors, spacing, and border-radius. Your tokens merge with Jetflow's base system, not over it.

brand-midspacing-18rounded-4xl

Responsive breakpoints

Five prefixes: sm, md, lg, xl, 2xl. Works on any utility.

md:flex-col lg:grid-cols-3

Arbitrary values

Bracket notation for one-off values without custom utilities.

mt-[42px] bg-[#1a1a1a] w-[calc(100%-2rem)]

Apply & component classes

Group utility chains into named selectors via the config.

.btn-primary .card .notice

Transform pipeline

Translate, rotate, scale, skew — all via CSS custom properties.

scale-105 rotate-12 translate-x-2

Ring & shadow system

Box shadow and focus ring utilities that compose cleanly.

ring-2 ring-brand-mid shadow-lg

MutationObserver powered

Dynamically added elements are automatically styled — perfect for SPAs.

Watches DOM · No re-init needed

index.html

<!-- Via .apply class -->
<button class="btn-primary">
  Get Started
</button>

<!-- Composed from utilities -->
<button class="flex-center gap-2 rounded-md
         bg-brand-mid px-4 py-2 text-sm
         text-bold text-white shadow-sm
         transition hover:bg-brand-dark
         focus:ring-2 focus:ring-brand-mid">
  Save Changes
</button>

<!-- Notice banner -->
<div class="notice">
  ⚠ Session expires in 5 minutes.
</div>

<!-- flex-between (navbar) -->
<header class="flex-between px-6 py-4
         border-b border-gray-200">
  <span class="text-bold">Logo</span>
  <nav class="flex-center gap-6">
    <a>Docs</a> <a>Blog</a>
  </nav>
</header>

<!-- Responsive grid -->
<div class="grid grid-cols-1
         md:grid-cols-2
         lg:grid-cols-3 gap-6">
  <div class="card">Item</div>
</div>

<!-- grid-center -->
<div class="grid-center min-h-screen">
  <p>Perfectly centered.</p>
</div>

<!-- .card apply class -->
<div class="card">
  <h3 class="text-lg text-bold mb-2
              dark:text-white">
    Card Title
  </h3>
  <p class="text-sm text-muted">
    Uses text-muted utility alias.
  </p>
</div>

<!-- box utility -->
<div class="box">
  Simple bordered block
</div>

<!-- box-dark variant -->
<div class="box-dark">
  Dark surface variant
</div>

// jetflow.config.js
export default {
  darkMode: "both",
  reset: true,
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#d9efff",
          mid:   "#1479c9",
          dark:  "#0d4f83"
        }
      },
      spacing: {
        18: "4.5rem",
        128: "32rem"
      }
    }
  },
  apply: {
    ".btn-primary": "flex-center gap-2
       rounded-md bg-brand-mid px-4 py-2
       text-sm text-bold text-white
       transition hover:bg-brand-dark"
  },
  utilities: {
    "flex-center": "flex items-center
       justify-center"
  }
};

Real markup

Classes in HTML.
CSS in the browser.

Jetflow parses your class attributes at load time, then watches the DOM for changes via MutationObserver. CSS is generated on demand — no output file, no stylesheet to maintain.

Arbitrary values — use mt-[42px] or bg-[#ff6b00] inline.

Responsive modifiers — prefix any class with md:, lg:, etc.

State variants — hover:, focus:, active: all supported.

No build step — works in a plain .html file served over any CDN.

Why utility-first

Less CSS.
More shipping.

Stop switching between HTML and a stylesheet. The answer is right there in the attribute.

Without Jetflow Generic CSS approach

/* styles.css */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: #1479c9;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  transition: background 0.2s;
}
.button:hover { background: #0d4f83; }
.button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #1479c9;
}

/* index.html */
<button class="button">...</button>

Lines written17 CSS + 1 HTML

Files touched2 (styles.css + index.html)

Build stepRequired

Dark modeManual media queries

With Jetflow Utility-first approach

<!-- index.html -- that's it -->

<button class="btn-primary">
  Get Started
</button>

<!-- or compose freely: -->

<button
  class="flex-center gap-2 rounded-md
         bg-brand-mid px-4 py-2
         text-sm text-bold text-white
         transition hover:bg-brand-dark
         focus:ring-2 focus:ring-brand-mid"
>
  Get Started
</button>

Lines written1 class attribute

Files touched1 (index.html only)

Build stepNone

Dark modedark: prefix, built-in

Write less.
Ship faster.

Everything resolved
at runtime.

Try it without
writing a line.

Less CSS.
More shipping.

Write less.Ship faster.

Everything resolvedat runtime.

Try it withoutwriting a line.

Less CSS.More shipping.

Write less.
Ship faster.

Everything resolved
at runtime.

Try it without
writing a line.

Less CSS.
More shipping.