bat-css

A mini Tailwind-like CSS utility library. Use it directly in the browser with zero setup — classes are scanned and styles are injected at runtime, just like Tailwind but without any build step.

Browser (Runtime)

Drop the script into your HTML and start using bat- classes. Styles are applied automatically — no config, no output files.

<script type="module" src="https://unpkg.com/bat-css/browser.js"></script>

<div class="bat-flex bat-bg-blue bat-p-4 bat-text-white bat-rounded-2">
  Hello, bat-css!
</div>

CLI (Build Time)

Prefer a static CSS file with no runtime JS? Use the CLI to scan your HTML and generate a bat.css file.

# Build once
npx bat-css build

# Custom glob + output path
npx bat-css build "src/**/*.html" -o dist/bat.css

# Watch mode — rebuilds on every save
npx bat-css watch "src/**/*.html"

Then link the output in your HTML:

<link rel="stylesheet" href="bat.css" />

Available Classes

Colors

bat-bg-{color} — background color
bat-text-{color} — text color
bat-border-{color} — border color

Spacing

bat-p-{size} — padding
bat-px-{size} — padding left & right
bat-py-{size} — padding top & bottom
bat-m-{size} — margin
bat-mx-{size} — margin left & right
bat-my-{size} — margin top & bottom
bat-w-{size} — width
bat-h-{size} — height
bat-gap-{size} — gap
bat-rounded-{size} — border radius

Layout

bat-flex — display: flex
bat-grid — display: grid
bat-justify-{value} — justify-content (center, between, around, start, end)
bat-items-{value} — align-items (center, start, end)

Colors

red blue green yellow black white gray pink purple orange violet cyan

Spacing Scale (0–10)

Each step = 4px. So bat-p-4 = padding: 16px.

| Class | Value | | ------ | ----- | | *-0 | 0px | | *-1 | 4px | | *-2 | 8px | | *-3 | 12px | | *-4 | 16px | | *-5 | 20px | | *-6 | 24px | | *-7 | 28px | | *-8 | 32px | | *-9 | 36px | | *-10 | 40px |