Quick Start

These examples use the public browser API. The npm and CDN examples pin the current release, 0.11.2; the docs build fills in the last verified npm version from apps/barocss-docs/published-version.json.

Install with a package manager

pnpm add @barocss/browser@0.11.2

@barocss/browser installs @barocss/kit as a dependency. Install @barocss/kit directly when you use its core API. Install @barocss/server separately for server-side CSS generation.

import { BrowserRuntime } from '@barocss/browser'

const runtime = new BrowserRuntime()
runtime.observe(document.body, { scan: true })

Call observe after document.body exists. It scans existing classes and watches later DOM changes. Call runtime.destroy() when the runtime is no longer needed.

If the page already links a Tailwind or shadcn build, use the Next to a Tailwind build recipe instead of the defaults.

Browser support: Chrome/Edge 85+, Safari/iOS 16.4+, Firefox 128+ (the runtime needs CSS @property).

Use the CDN without a build step

The dist/cdn/barocss.js and dist/cdn/barocss.umd.cjs files are part of the published browser package. The examples use jsDelivr, the same CDN form as the README. Drop the @0.11.2 pin to follow the latest release.

CDN global is browser-only

The UMD script's window.BaroCSS (and the ESM CDN module) exposes only @barocss/browser: BrowserRuntime, getRuntime, baroBoot/baroStart, ChangeDetector, StylePartitionManager, shadcnTheme, preloadJsonRenderClasses, collectJsonRenderClassNames, normalizeClassName(List), SSR_STYLE_SELECTOR, LAYER_ORDER. There is no generateCss/generateCssForHtml/ServerRuntime: server-side generation needs @barocss/server in Node (Server Runtime).

ESM

Place this script near the end of the page body:

<script type="module">
  import { baroStart } from 'https://cdn.jsdelivr.net/npm/@barocss/browser@0.11.2/dist/cdn/barocss.js'
  baroStart()
</script>

UMD

Place these scripts near the end of the page body:

<script src="https://cdn.jsdelivr.net/npm/@barocss/browser@0.11.2/dist/cdn/barocss.umd.cjs"></script>
<script>
  BaroCSS.baroStart()
</script>

baroStart is an alias of baroBoot. It creates a browser runtime, scans the body, and starts observing changes. The package does not export bootStart.

For manual control, use BrowserRuntime as shown in the package manager example. Not sure which to use? See BrowserRuntime or getRuntime. See Browser Runtime for its methods and Compatibility for the measured Tailwind scope.