Style from data.
Zero wasted CSS

CSSzyx compiles sz props to Tailwind at build time.
For runtime UI states or dynamic API data — it injects only the exact CSS Delta you need. No more safelist bloat or pre-defined string concatenation.

Get startedarrow_right_alt View Docsarrow_right_alt

compiling...

↓p-4 bg-blue-500 hover:bg-blue-600

↓z y x

Built for
Visionaries

Built from the ground up to support the demanding, hyper-dynamic workflows of Form Renderers, CMS platforms, and Enterprise Design Systems.

For Form Renderers

Bring Tailwind into your data-driven components. Style dynamic form fields directly from JSON schemas without bloating user stylesheets with duplicate rules. Zero duplicated CSS.

The End of Safelisting

Stop fighting Tailwind's compiler just to toggle a dynamic width or padding on scroll. Inject precise CSS states dynamically via true JS variables—without ever having to pre-define static string concatenations or bloated safelists in your config.

True Dynamic Styling

The biggest pain point in Tailwind is the inability to dynamically compute classes at runtime. Stop concatenating messy strings or compiling bloated safelists just to handle a scroll header or a user-selected theme. With CSSzyx, you inject the exact CSS state you need via JS variables, entirely on demand.

Header.tsx

import { useSz } from '@csszyx/dynamic/react';

export function Header({ isScrolled, themeColor }) {

const { sz } = useSz();

// 💥 ZERO predefined classes. ZERO safelists.

const classes = sz({

bg: themeColor, // CMS / API Hex

py: isScrolled ? 4 : 12,

shadow: isScrolled ? 'md' : 'none'

});

return (

</nav>

);

}

The elegant architecture
of Delta injection.

01 / Build

Compilation

sz props compile to Tailwind classes before JIT runs. Zero overhead at runtime — just standard CSS selectors.

<Field sz={{{ p: 4, bg: "white" }} />
/* Outputs: .p-4, .bg-white */

02 / Index

Manifest

Every class in your built CSS is recorded into a map. Giving you O(1) instantaneous lookup.

// csszyx-manifest.json
{
"classes": ["p-4", "bg-white"]
}

03 / Runtime

Delta Injection

Unknown styles are detected and injected automatically on demand. Never duplicated.

const { sz } = useSz();

// Dynamic API styles
const cls = sz({ bg: api.color });

Performance so fast,
it feels instant.

Benchmarks run on Node.js 22 & Chromium 124.

<1µs

Manifest lookup

<2ms

First inject, 50 classes

<8KB

@csszyx/dynamic

100%

Deterministic logic

Ready to style from data?

Start with zero-runtime compilation.
Add @csszyx/dynamic when you need it.
No lock-in. Pure Tailwind output.

$npm install csszyx# build-time only

$npm install @csszyx/dynamic# + runtime delta injection

Style from data.Zero wasted CSS

Built for Visionaries