jQuery Integration

BaroCSS works in existing jQuery apps without any build step. This guide shows minimal setup and common patterns.

Setup

Option 1. CDN (UMD)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>jQuery + BaroCSS</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@barocss/browser@0.11.2/dist/cdn/barocss.umd.cjs"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    const runtime = new BaroCSS.BrowserRuntime()
    runtime.observe(document.body, { scan: true })
  </script>
</body>
</html>

Option 2. ESM

<script type="module">
  import { BrowserRuntime } from 'https://cdn.jsdelivr.net/npm/@barocss/browser@0.11.2/dist/cdn/barocss.js'
  const runtime = new BrowserRuntime()
  runtime.observe(document.body, { scan: true })
</script>

Basic Usage

Add or update classes with jQuery; BaroCSS generates CSS on demand.

<div id="card" class="p-4 rounded-md bg-white shadow">Hello</div>

<script>
  // Add utilities
  $('#card').addClass('bg-blue-500 text-white')

  // Update on hover
  $('#card').addClass('hover:bg-blue-600 transition')

  // Responsive
  $('#card').addClass('sm:p-6 lg:p-8')
</script>

Partial UI Updates

Use delegated events and apply classes only where needed.

<ul id="items"></ul>

<script>
  // Append items dynamically
  for (let i = 0; i < 5; i++) {
    $('#items').append(
      `<li class="px-4 py-2 border-b border-slate-200 hover:bg-slate-50">Item ${i+1}</li>`
    )
  }

  // Toggle selected state
  $('#items').on('click', 'li', function () {
    $(this).toggleClass('bg-emerald-50 border-emerald-300')
  })
</script>