Chai-Tailwind gives you composable utility classes that map directly
to CSS properties — zero config, zero bloat, pure clarity.
Click utilities to apply them. Watch the preview update instantly.
Type HTML with Chai-Tailwind classes. Preview updates instantly.
Every utility class, explained with examples.
Control padding and margin using scale-based classes. Values follow an 8px base unit.
chai-p-{n}padding: n×4pxchai-px-{n}padding-left + rightchai-py-{n}padding-top + bottomchai-m-{n}margin: n×4pxchai-mx-{n}margin-left + rightchai-my-{n}margin-top + bottomControl font size, weight, alignment, and line height.
chai-text-xs12pxchai-text-sm14pxchai-text-lg18pxchai-text-xl20pxchai-text-2xl24pxchai-font-boldfont-weight: 700chai-text-centertext-align: centerchai-text-xs — Extra small
chai-text-sm — Small text
chai-text-base — Base
chai-text-lg bold
Background and text color utilities. Supports 12+ named colors.
chai-bg-{color}background-colorchai-text-{color}colorSet border width and color with simple composable classes.
chai-borderborder: 1px solidchai-border-2border-width: 2pxchai-border-4border-width: 4pxchai-border-{color}border-colorSmooth out corners from slightly rounded to fully circular.
chai-rounded-sm2pxchai-rounded4pxchai-rounded-lg8pxchai-rounded-xl16pxchai-rounded-full9999pxDisplay utilities and flexbox controls for building any layout quickly.
chai-flexdisplay: flexchai-justify-centerjustify-content: centerchai-justify-betweenjustify-content: space-betweenchai-items-centeralign-items: centerchai-gap-{n}gap: n×4pxchai-flex-colflex-direction: columnAdd Chai-Tailwind to your project in seconds.
<script src="https://cdn.jsdelivr.net/gh/rony-codes/chai-tailwind@main/index.js"></script>
Drop before your closing </body> tag. No npm, no bundler, no config.
<div class="chai-bg-grey chai-p-4 chai-rounded-lg
chai-text-white chai-font-bold chai-text-center">
Hello, Chai-Tailwind! ☕
</div>
<script src="https://cdn.jsdelivr.net/gh/rony-codes/chai-tailwind@main/index.js"></script>