Skip to content

BaroCSS Guide

Welcome to the BaroCSS documentation! This guide will help you understand and use BaroCSS effectively.

What is BaroCSS?

BaroCSS is a CSS parsing and generation engine that brings Tailwind's utility-first approach to runtime environments. Inspired by Tailwind CSS and UnoCSS. It 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

Key Features

⚡ Runtime-First

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

🎯 Tailwind Compatible

Full support for Tailwind CSS syntax including utilities, variants, and arbitrary values.

🧠 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.

Released under the MIT License.