npm package: @pallabdev/chai-tailwind
Description: A tiny runtime utility-class engine inspired by Tailwind.
Latest version: 0.1.1

# chai-tailwind

A tiny runtime utility-class engine inspired by Tailwind CSS.

`chai-tailwind` parses class names in the DOM and applies equivalent inline styles with JavaScript.

## Install

```bash
npm install chai-tailwind
```

## Usage

```js
import { tailwind } from "chai-tailwind";

tailwind();
```

Call `tailwind()` after your HTML is available in the page so class names can be scanned and styles can be applied.

## API

### `tailwind()`

- Injects a small reset style (`margin: 0`, `padding: 0`, `box-sizing: border-box`, `text-decoration: none`, default sans font stack).
- Scans all DOM elements once.
- Converts supported utility classes into inline styles.

## Supported Classes

### Class value rules

- Arbitrary values use brackets: `w-[420px]`, `text-[40px]`, `bg-[#111111]`.
- Numeric scale values use `n * 0.25rem` (example: `p-4` => `1rem`).
- Size tokens (for text/sizing/spacing/radius where applicable): `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, `8xl`, `9xl`.

### Color tokens

`red`, `blue`, `green`, `yellow`, `purple`, `pink`, `gray`, `slate`, `zinc`, `neutral`, `stone`, `orange`, `amber`, `lime`, `emerald`, `teal`, `cyan`, `sky`, `indigo`, `violet`, `fuchsia`, `rose`, `black`, `white`

### Text utilities

| Class pattern          | Example          | Result                                        |
| ---------------------- | ---------------- | --------------------------------------------- |
| `text-<sizeToken>`     | `text-2xl`       | `font-size` from size token map               |
| `text-[<value>]`       | `text-[40px]`    | `font-size: 40px`                             |
| `text-[#<hex>]`        | `text-[#ff0000]` | `color: #ff0000`                              |
| `text-<color>-<shade>` | `text-blue-500`  | computed `color` shade from base color        |
| `font-bold`            | `font-bold`      | `font-weight: 700`                            |
| `underline`            | `underline`      | `text-decoration: underline`                  |
| `italic`               | `italic`         | currently mapped as `text-decoration: italic` |
| `capitalize`           | `capitalize`     | `text-transform: capitalize`                  |
| `uppercase`            | `uppercase`      | `text-transform: uppercase`                   |

### Background utilities

| Class pattern        | Example          | Result                              |
| -------------------- | ---------------- | ----------------------------------- |
| `bg-<color>`         | `bg-white`       | `background-color` from color token |
| `bg-<color>-<shade>` | `bg-emerald-500` | computed shade from base color      |
| `bg-[<value>]`       | `bg-[#111111]`   | raw `background-color` value        |

### Width and height

| Class pattern   | Example        | Result                                |
| --------------- | -------------- | ------------------------------------- |
| `w-<keyword>`   | `w-full`       | `full`, `screen`, `min`, `max`, `fit` |
| `w-<sizeToken>` | `w-5xl`        | token-based width                     |
| `w-<number>`    | `w-64`         | `number * 0.25rem`                    |
| `w-[<value>]`   | `w-[320px]`    | raw width                             |
| `min-w-<...>`   | `min-w-screen` | same value rules as `w-`              |
| `h-<keyword>`   | `h-screen`     | `full`, `screen`, `min`, `max`, `fit` |
| `h-<sizeToken>` | `h-3xl`        | token-based height                    |
| `h-<number>`    | `h-40`         | `number * 0.25rem`                    |
| `h-[<value>]`   | `h-[50dvh]`    | raw height                            |
| `min-h-<...>`   | `min-h-screen` | same value rules as `h-`              |

Keyword mapping:

- `full` => `100%`
- `screen` => `100vw` for width/min-width, `100vh` for height/min-height
- `min` => `min-content`
- `max` => `max-content`
- `fit` => `fit-content`

### Layout utilities

| Class             | Result                                  |
| ----------------- | --------------------------------------- |
| `flex`            | `display: flex`                         |
| `flex-col`        | `flex-direction: column`                |
| `flex-row`        | `flex-direction: row`                   |
| `flex-wrap`       | `flex-wrap: wrap`                       |
| `grid`            | `display: grid`                         |
| `grid-cols-<n>`   | `grid-template-columns: repeat(n, 1fr)` |
| `grid-cols-[<n>]` | `grid-template-columns: repeat(n, 1fr)` |

### Alignment utilities

| Class pattern     | Supported values                                        |
| ----------------- | ------------------------------------------------------- |
| `justify-<value>` | `start`, `end`, `center`, `between`, `around`, `evenly` |
| `items-<value>`   | `start`, `end`, `center`, `baseline`, `stretch`         |

### Gap utilities

| Class pattern     | Example      |
| ----------------- | ------------ |
| `gap-<number>`    | `gap-6`      |
| `gap-<sizeToken>` | `gap-lg`     |
| `gap-[<value>]`   | `gap-[12px]` |

### Padding utilities

| Class pattern | Example |
| ------------- | ------- |
| `p-<value>`   | `p-4`   |
| `px-<value>`  | `px-6`  |
| `py-<value>`  | `py-2`  |
| `pt-<value>`  | `pt-8`  |
| `pb-<value>`  | `pb-8`  |
| `pl-<value>`  | `pl-8`  |
| `pr-<value>`  | `pr-8`  |

`<value>` supports numeric scale, size tokens, and arbitrary bracket values.

### Margin utilities

| Class pattern | Example |
| ------------- | ------- |
| `m-<value>`   | `m-4`   |
| `mx-<value>`  | `mx-6`  |
| `my-<value>`  | `my-2`  |
| `mt-<value>`  | `mt-8`  |
| `mb-<value>`  | `mb-8`  |
| `ml-<value>`  | `ml-8`  |
| `mr-<value>`  | `mr-8`  |

`<value>` supports numeric scale, size tokens, and arbitrary bracket values.

### Border radius utilities

| Class pattern         | Example          | Result                   |
| --------------------- | ---------------- | ------------------------ |
| `rounded`             | `rounded`        | `border-radius: 0.25rem` |
| `rounded-none`        | `rounded-none`   | `border-radius: 0px`     |
| `rounded-full`        | `rounded-full`   | `border-radius: 9999px`  |
| `rounded-<sizeToken>` | `rounded-lg`     | token-based radius       |
| `rounded-<number>`    | `rounded-8`      | `number * 0.25rem`       |
| `rounded-[<value>]`   | `rounded-[12px]` | raw radius               |