BaroCSSCSS Runtime Engine

Generate utility CSS in the browser or on the server

Get Started

View Examples

View on GitHub

⚡

Runtime-First

Parse and generate CSS at runtime without build processes. Perfect for dynamic content and real-time styling.

🎯

Tailwind-style syntax

Use supported utilities, variants, and arbitrary values. Check the measured compatibility scope before migrating.

🧠

Smart Parsing

Advanced AST processing with incremental parsing and intelligent caching for optimal performance.

🚀

Multiple Runtimes

Browser runtime for real-time DOM detection and server runtime for static CSS generation.

🔧

TypeScript API

Comprehensive TypeScript API with full type safety and excellent developer experience.

🌐

Universal

Works in browsers, Node.js, and any JavaScript environment with consistent behavior.

What is BaroCSS?

BaroCSS is a CSS parsing and generation engine for utility classes. Its browser runtime can generate styles when classes appear in the DOM. It is inspired by Tailwind CSS and UnoCSS. It does not yet claim full Tailwind compatibility. See the measured compatibility scope before using it with existing Tailwind markup.

Core Architecture

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 generation

Start using BaroCSS

The Quick Start shows the browser runtime with its public API. The API reference covers the core and server packages.