Quick start

The shortest possible page with chaiTailwind:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chai test</title>
    <script src="https://unpkg.com/@developedbysaad/chaitailwind"></script>
  </head>
  <body>
    <div class="chai-p-8 chai-bg-cream-200 chai-text-chai-800 chai-text-center">
      <h1 class="chai-text-4xl chai-font-bold">Hello, chai.</h1>
      <p class="chai-mt-4 chai-text-lg">It just works.</p>
      <button class="chai-mt-6 chai-px-5 chai-py-2 chai-bg-chai-700 chai-text-white chai-rounded-full chai-cursor-pointer">
        Brew
      </button>
    </div>
  </body>
</html>

That’s the entire file. Save it, open it in a browser, done.

What’s happening

The script tag at the top loads chaiTailwind.
The library waits for DOMContentLoaded.
It walks every element under <body> and reads classList.
For each class starting with chai-, it parses the rest of the token (p-8, bg-cream-200, …) and resolves it to a style object.
The style is applied via element.style.setProperty(...).
The chai-* class is removed (so your DOM inspector stays clean).
A MutationObserver keeps watching, so anything you add later is styled too.

Adding interactivity

Because chaiTailwind observes mutations, ordinary DOM scripting Just Works:

<button id="add" class="chai-px-4 chai-py-2 chai-bg-saffron chai-text-white chai-rounded-md">
  Add card
</button>
<div id="list" class="chai-flex chai-gap-3 chai-mt-4 chai-flex-wrap"></div>

<script>
  document.getElementById('add').onclick = () => {
    const card = document.createElement('div');
    card.className = 'chai-p-4 chai-bg-cardamom-100 chai-rounded-lg chai-text-cardamom-800';
    card.textContent = 'New card ' + Date.now();
    document.getElementById('list').appendChild(card);
    // No manual scan needed — the observer picks it up.
  };
</script>

Next steps

Tweak behavior with Configuration — script-tag attributes or a programmatic new Chai({...}).
Read How it works to understand the engine.
Browse the Utilities reference.

Made by Saad · @developedbysaad on X