A CSS parsing and generation engine that brings Tailwind's utility-first approach to runtime environments
BaroCSS is a CSS parsing and generation engine that brings Tailwind's utility-first approach to runtime environments. Built from the ground up to support Tailwind CSS syntax, it enables dynamic CSS generation without build processes. Inspired by Tailwind CSS and UnoCSS.
BaroCSS consists of three main packages:
@barocss/kit - Core parsing and generation engine@barocss/browser - Browser runtime with DOM change detection@barocss/server - Server runtime for static CSS generationTraditional Build Process:
# Write classes → Build → Wait → Deploy
<div class="bg-blue-500 hover:bg-blue-700">Button</div>
# Requires build step and deploymentBaroCSS Runtime:
# Write classes → Generate CSS instantly
<div class="bg-blue-500 hover:bg-blue-700">Button</div>
# CSS generated at runtime, no build neededCore Engine (@barocss/kit):
import { parseClassToAst, generateCss, createContext } from '@barocss/kit';
const context = createContext();
const ast = parseClassToAst('bg-blue-500 text-white p-4', context);
const css = generateCss('bg-blue-500 text-white p-4', context);Browser Runtime (@barocss/browser):
import { BrowserRuntime } from '@barocss/browser';
const runtime = new BrowserRuntime();
runtime.observe(document.body, { scan: true });
// Automatically detects and styles new classesServer Runtime (@barocss/server):
import { ServerRuntime } from '@barocss/server';
const runtime = new ServerRuntime();
const css = runtime.generateCss('bg-blue-500 text-white p-4');
// Generate CSS for server-side renderingBaroCSS excels when you need to generate CSS for dynamic content:
// User-generated content with arbitrary values
const userContent = `
<div class="w-[${width}px] h-[${height}px] bg-[${color}] rounded-[${radius}px]">
Dynamic content styled instantly
</div>
`;
// BaroCSS parses arbitrary values like w-[400px], bg-[#ff0000] at runtime