API Reference

One line per page. New here? Start with the Quick Start; check the compatibility scope before reusing Tailwind classes from an existing project.

Browser (@barocss/browser)

page	what it covers
Browser Runtime	BrowserRuntime, getRuntime, baroBoot/baroStart: generate CSS for classes in the DOM and watch changes (observe, addClass, getCss, updateConfig, destroy). Which one to use: BrowserRuntime or getRuntime

Server (@barocss/server, Node)

page	what it covers
Server Runtime	ServerRuntime: generateCssForHtml(html, { skip }) returns the CSS for one HTML response's classes; generateCss('a b c') returns one complete sheet for class names; ssrStyleTag(css, { nonce }) wraps it in <style data-barocss-ssr> for <head> so the browser runtime adopts it

Experimental renderer (@barocss/render, staged)

page	what it covers
Renderer API	Renderer, validateSpec, classesFor: five-component profile forms with host state/actions; local example. First public release is not yet published.

Configuration and core (@barocss/kit)

page	what it covers
Configuration	the config object: theme, darkMode, prefix, cssVarPrefix, utilities, preflight
Context API	createContext(config): resolved theme and config lookups shared by parser and engine
Parser API	parseClassToAst: split a class name into variants and utility
Engine API	generateCss / generateCssRules: turn classes into CSS text
AST Processing API	low-level AST transforms behind the engine

Extending

page	what it covers
Static Utility API	staticUtility: a fixed class to declarations (flex, hidden)
Functional Utility API	functionalUtility: value-taking utilities (p-4, bg-red-500, arbitrary values)
Static Modifier API	staticModifier: fixed variants (hover:, focus:)
Functional Modifier API	functionalModifier: parameterized variants (group-*, data-*, breakpoints)

Guides: Vite + Tailwind 4, Next to a Tailwind build, Astro (SSR and static), Security.

📖 Quick Reference

By Use Case

Browser Development

• Browser Runtime - DOM integration
• Context API - Configuration
• Static Utility API - Custom utilities

Server-Side Rendering

• Server Runtime - CSS generation
• Engine API - Core processing
• Configuration - Theme setup

Custom Development

• Static Utility API - Fixed utilities
• Functional Utility API - Dynamic utilities
• Static Modifier API - Fixed modifiers
• Functional Modifier API - Dynamic modifiers

Advanced Usage

• Parser API - Class parsing details
• AST Processing API - AST manipulation
• Engine API - Core functions

🎯 Main Entry Points

Browser Usage

// CDN
import { BrowserRuntime } from 'https://cdn.jsdelivr.net/npm/@barocss/browser@0.11.2/dist/cdn/barocss.js';

// NPM
import { BrowserRuntime } from '@barocss/browser';

Server Usage

import { ServerRuntime } from '@barocss/server';
import { createContext, generateCss } from '@barocss/kit';

Core Usage

import { 
  createContext, 
  parseClassToAst, 
  generateCss,
  IncrementalParser 
} from '@barocss/kit';

🔧 Key Concepts

Context

The central configuration and theme management system that provides access to theme values and configuration options.

Engine

The core CSS generation system that parses class names, builds ASTs, and converts them to CSS rules.

Runtime

Environment-specific implementations that handle CSS injection (browser) or generation (server).

Custom Utilities

Context registries for adding custom utilities and variants.

📖 API Categories

Core Functions

• createContext(config) - Create a BaroCSS context
• parseClassToAst(className, ctx) - Parse class to AST
• generateCss(classList, ctx) - Generate CSS from classes
• IncrementalParser - Efficient class processing

Runtime Classes

• BrowserRuntime - Browser DOM integration
• ServerRuntime - Server-side processing
• ChangeDetector - DOM change monitoring

Custom Utilities

• staticUtility() - Register static utilities with fixed CSS
• functionalUtility() - Register dynamic utilities with value processing

Custom Modifiers

• staticModifier() - Register static modifiers with fixed selectors
• functionalModifier() - Register dynamic modifiers with pattern matching

Configuration

• Config interface - Configuration options
• Theme interface - Theme structure
• Theme extension and customization

🎨 Usage Patterns

Basic Styling

const runtime = new BrowserRuntime();
runtime.addClass('bg-blue-500 text-white p-4');

Custom Theme

const ctx = createContext({
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      }
    }
  }
});

Custom Utilities

import { staticUtility, functionalUtility } from '@barocss/kit';
import { decl } from '@barocss/kit';

// Register static utility
staticUtility('custom-bg', [
  decl('background-color', 'var(--custom-color)'),
  decl('border-radius', '8px')
]);

// Register functional utility
functionalUtility({
  name: 'custom-text',
  prop: 'color',
  handle: (value) => [decl('color', value)]
});

---

Ready to dive deeper? Start with the Context API to understand how BaroCSS manages themes and configuration.