const Card = $$.$({
  radius: 'lg',
  bg: 'surface'
});

<$$
  padding={[3, 6]}
  float="left"
/>

<div class="display:flex gap:12" />

<section className="
  mobile:grid-cols:4
  tablet:grid-cols-8
" />

<$$ tokens={{ color: { brand: '#bd93f9' } }}>
  <$$.p color="brand">
    Brand colored
  </$$.p>
</$$>

<div class="hover:{color:brand;text-decoration:underline}" />

<div class="
  [&_.item]:color:red
  hover:[&_.item]:opacity:0.8
  [&_.item]:transition:all
" />

const button = $$.cv('button', {
  variants: {
    tone: {
      brand: 'bg:brand color:white',
      ghost: 'bg:transparent',
    },
  },
});

<div
  className="color:red"
  background={bgColor}
/>

<$$
  color="brand"
  borderRadius="md"
/>

<div className="flex px:2" />
<$$ flex px={4} />

<?php echo '<input class="width:100% padding:4" />' ?>

Boss CSS𝜷Not ready for production—and possibly never will be!

Polymorphic CSS-in-JS that adjusts to your needs.

Generate only what you use. Runtime or Zero-runtime output, classNames or style props, it's up to you, you're the Bo$$.

Get Started Launch Playground

Polymorphic output

Runtime, types, AI docs, all generated during development based on your usage and needs.

Zero-runtime paths

Compile away or use classname-only strategy when you want zero runtime.

CSS-familiar class name syntax

If you know CSS, you know Boss class names.

CSS boundaries

Split CSS by folder to reduce you critical CSS size.

Bosswind mode

Tailwind-like prop and className shorthands.

Multiple strategies

Inline-first, classname-first, runtime-only, classname-only or hybrid from one API.

Global $$ API

A single powerful global proxy for components, tokens, and helpers.

Nested contexts

Pseudo, at, child, and container queries in one syntax.

Typed tokens

Token maps with typed global access.

Plugin pipeline

Async event pipeline for server, runtime, and compile.

Devtools (React)

Live inspection, prop modification, quick previews capable of saving your changes in your source file.

Boss-aware helpers

cx / cv / scv / sv for class name + style object composition and variants.

AI ready

Dynamically generated LLMS.md and skills support.

Tooling-agnostic

PostCSS and/or CLI only, no bundler plugins required.

Language-agnostic

Class names work in any framework or language that's text based.

Prepared components

Styled-components-like prebuilt components.

Container queries

Container props + shorthands for responsive UI.

Compile transforms

SWC-based compiler to prune runtime and optimize selectors.

Lightweight runtime

Runtime only manages class and style props, it doesn't create/manipulate style nodes.

Arbitrary selectors

Selectors like `[&_.item]:color:red` when needed.

Token context

ThemeContext-like component-level token overrides for contextual theming.

CSS reset plugin

Optional reset shipped as a plugin for consistent base styles.

Fontsource plugin

Built-in fontsource integration for font tokens.

Framework adapters

React, Preact, Solid, Qwik, and Stencil runtimes.

DTCG token support

Import your DTCG tokens (for example from Style Dictionary).

CLI tools

init, watch, build, dev server, and more.

Linting + formatting

ESLint plugin for best practices and formatting.

Choose Your Strategy

Boss CSS adapts to your needs. Pick the output strategy that fits your project.

Features

Default

Inline-first

Classname-first

Classname-only

Runtime-only

Hybrid

Build time CSS

Runtime CSS injection

Runtime JS

Zero-runtime compile

JSX $$ authoring

className parsing

Non-JS / static HTML

Dynamic values

CSS file size

Runtime cost

Boss CSSBoss CSS𝜷Not ready for production—and possibly never will be!

Choose Your Strategy

Boss CSS𝜷Not ready for production—and possibly never will be!