# CSSzyx

> Object-syntax Tailwind CSS. Type-safe. Zero runtime. SSR-safe.

CSSzyx is a build-time CSS framework that transforms JSX `sz` props into Tailwind v4 utility classes. The compiler runs at build time — no runtime overhead in the browser.

## Install

```bash
npm install csszyx
```

### Vite

```js
// vite.config.ts
import csszyx from "csszyx/vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    ...csszyx(), // csszyx MUST come before tailwindcss
    tailwindcss(),
  ],
});
```

### Next.js (Webpack)

```js
// next.config.js
const csszyxWebpack = require("@csszyx/unplugin/webpack").default;

module.exports = {
  webpack(config) {
    config.plugins.unshift(...csszyxWebpack());
    return config;
  },
};
```

## Core Syntax

### Basic usage

```tsx
// Before (Tailwind)
<div className="flex items-center p-4 bg-blue-500 rounded-lg" />

// After (CSSzyx)
<div sz={{ flex: true, items: 'center', p: 4, bg: 'blue-500', rounded: 'lg' }} />
```

The compiler transforms `sz` props → Tailwind classes at build time. The browser never sees `sz`.

### Boolean shorthand

Many display/position properties accept `true`:

```tsx
<div sz={{ flex: true, relative: true, hidden: true }} />
// → className="flex relative hidden"
```

### Arbitrary values

```tsx
<div sz={{ w: "333px", top: "-1px", bg: "#316ff6" }} />
// → className="w-[333px] top-[-1px] bg-[#316ff6]"
// Note: compiler auto-wraps in [] — no need to add them yourself
```

### CSS variables

```tsx
<div sz={{ color: "--ds-primary", p: "--spacing-4" }} />
// → className="text-(--ds-primary) p-(--spacing-4)"
// Sugar: any value starting with -- is auto-wrapped in ()
```

### Color with opacity

```tsx
<div sz={{ bg: { color: 'blue-500', op: 50 } }} />
// → className="bg-blue-500/50"

// Hex/rgb/hsl values are auto-wrapped in brackets
<div sz={{ bg: { color: '#0d0d12', op: 90 } }} />
// → className="bg-[#0d0d12]/90"

// Sub-half-step decimals use arbitrary brackets
<div sz={{ bg: { color: 'black', op: 0.05 } }} />
// → className="bg-black/[0.05]"
```

## Variants

Variants are nested objects:

```tsx
<div
  sz={{
    bg: "white",
    hover: { bg: "blue-100" },
    dark: { bg: "gray-800" },
    md: { p: 8 },
    focus: { outline: "none", ring: 2 },
  }}
/>
```

### Responsive

```tsx
sz={{ w: 'full', md: { w: '1/2' }, lg: { w: '1/3' } }}
// → className="w-full md:w-1/2 lg:w-1/3"
```

### State modifiers

```tsx
sz={{
  hover: { bg: 'sky-700' },
  focus: { outline: 'none' },
  active: { opacity: 80 },
  disabled: { opacity: 50 },
  focusVisible: { ring: 2 },
}}
```

### Dark mode

```tsx
sz={{ bg: 'white', dark: { bg: 'gray-900' } }}
```

### Group / Peer

```tsx
sz={{ group: { hover: { color: 'white' } } }}
// → className="group-hover:text-white"

sz={{ peer: { checked: { bg: 'blue-500' } } }}
// → className="peer-checked:bg-blue-500"
```

### Group Data / ARIA (parent data-_and aria-_ attributes)

```tsx
// group-data: style children based on data-* attr on group parent
sz={{ group: { data: { active: { color: 'blue-600' } } } }}
// → className="group-data-[active]:text-blue-600"

sz={{ group: { data: { 'state=open': { bg: 'green-50' } } } }}
// → className="group-data-[state=open]:bg-green-50"

// named group + data
sz={{ group: { card: { data: { active: { color: 'blue-600' } } } } }}
// → className="group-data-[active]/card:text-blue-600"

// group-aria: standard states use bare form, non-standard use brackets
sz={{ group: { aria: { expanded: { color: 'blue-600' } } } }}
// → className="group-aria-expanded:text-blue-600"

sz={{ group: { aria: { 'current=page': { fontWeight: 'bold' } } } }}
// → className="group-aria-[current=page]:font-bold"

// peer-data / peer-aria work the same way
sz={{ peer: { data: { error: { color: 'red-600' } } } }}
// → className="peer-data-[error]:text-red-600"

sz={{ peer: { aria: { checked: { bg: 'blue-100' } } } }}
// → className="peer-aria-checked:bg-blue-100"
```

### Data / ARIA attributes

```tsx
sz={{ data: { active: { bg: 'blue' } } }}
// → className="data-[active]:bg-blue"

sz={{ aria: { expanded: { color: 'blue' } } }}
// → className="aria-expanded:text-blue"
```

### Pseudo-elements

```tsx
sz={{ before: { content: '""' }, after: { bg: 'blue-500' } }}
// content: '""' → content-[''] (compiler normalizes double-quote form to single-quote)
// content: "''" also works → content-[''] (same output)
sz={{ placeholder: { color: 'gray-400' } }}
```

### Container queries

```tsx
sz={{ '@container': true, '@md': { flex: true } }}
// → className="@container @md:flex"
```

## Critical Rules — Common Mistakes

```tsx
// ❌ CSS property names as keys — use sz keys
{ padding: 4 }               // Wrong → { p: 4 }
{ backgroundColor: 'blue' }  // Wrong → { bg: 'blue' }
{ flexDirection: 'col' }     // Wrong → { flexDir: 'col' }
{ marginTop: 4 }             // Wrong → { mt: 4 }
{ fontSize: 'lg' }           // Wrong → { text: 'lg' }

// ❌ Manual brackets — compiler auto-wraps arbitrary values
{ w: '[333px]' }             // Wrong → { w: '333px' }
{ top: '[-1px]' }            // Wrong → { top: '-1px' }

// ❌ Tailwind class strings as values
{ p: 'p-4' }                 // Wrong → { p: 4 }
{ bg: 'bg-blue-500' }        // Wrong → { bg: 'blue-500' }

// ❌ Mixing className= and sz= on the same element
<div className="p-4" sz={{ m: 2 }} />  // Wrong — use sz only

// ✅ Correct
{ p: 4, bg: 'blue-500', flex: true, flexDir: 'col', w: '333px', mt: 4, text: 'lg' }
```

## Full Snippets Reference

# Core Concepts

## Styling with Utility Classes

## Basic Utilities

Simple property-value mappings.

| Concept              | CSS Property                             | Tailwind v4 Class | `sz` Prop (Canonical) |
| :------------------- | :--------------------------------------- | :---------------- | :-------------------- |
| **Padding**          | `padding: 1.5rem`                        | `p-6`             | `{ p: 6 }`            |
| **Background Color** | `background-color: var(--color-sky-500)` | `bg-sky-500`      | `{ bg: 'sky-500' }`   |
| **Text Color**       | `color: white`                           | `text-white`      | `{ color: 'white' }`  |
| **Border Radius**    | `border-radius: var(--radius-lg)`        | `rounded-lg`      | `{ rounded: 'lg' }`   |
| **Box Shadow**       | `box-shadow: var(--shadow-xl)`           | `shadow-xl`       | `{ shadow: 'xl' }`    |
| **Flex Container**   | `display: flex`                          | `flex`            | `{ flex: true }`      |

## State Modifiers (Hover, Focus)

Handling pseudo-classes using nested objects or string prefixes.

| Concept              | CSS Rule (Simplified)                 | Tailwind v4 Class           | `sz` Prop (Canonical)       | `sz` Prop (Object Syntax)                    |
| :------------------- | :------------------------------------ | :-------------------------- | :-------------------------- | :------------------------------------------- |
| **Hover State**      | `&:hover { background-color: (etc) }` | `hover:bg-sky-700`          | `{ hover: 'bg-sky-700' }`   | `{ hover: { bg: 'sky-700' } }`               |
| **Focus State**      | `&:focus { outline: (etc) }`          | `focus:outline-none`        | `{ focus: 'outline-none' }` | `{ focus: { outline: 'none' } }`             |
| **Active State**     | `&:active { opacity: 0.8 }`           | `active:opacity-80`         | `{ active: 'opacity-80' }`  | `{ active: { opacity: 80 } }`                |
| **Disabled + Hover** | `&:disabled:hover { (etc) }`          | `disabled:hover:bg-sky-500` | N/A (Complex string)        | `{ disabled: { hover: { bg: 'sky-500' } } }` |

## Responsive Design (Breakpoints)

Handling media queries via properties.

| Concept              | CSS Rule                            | Tailwind v4 Class | `sz` Prop (Object Syntax) |
| :------------------- | :---------------------------------- | :---------------- | :------------------------ |
| **Small Breakpoint** | `@media (width >= 40rem) { (etc) }` | `sm:grid-cols-3`  | `{ sm: { gridCols: 3 } }` |
| **Medium Layout**    | `@media (width >= 48rem) { (etc) }` | `md:flex`         | `{ md: { flex: true } }`  |
| **Large Spacing**    | `@media (width >= 64rem) { (etc) }` | `lg:px-8`         | `{ lg: { px: 8 } }`       |

## Dark Mode

Handling `prefers-color-scheme` or class-based dark mode.

| Concept             | CSS Rule                                        | Tailwind v4 Class  | `sz` Prop (Object Syntax)      |
| :------------------ | :---------------------------------------------- | :----------------- | :----------------------------- |
| **Dark Background** | `@media (prefers-color-scheme: dark) { (etc) }` | `dark:bg-gray-800` | `{ dark: { bg: 'gray-800' } }` |
| **Dark Text**       | `(etc) { color: white }`                        | `dark:text-white`  | `{ dark: { color: 'white' } }` |

## Composition (Filters & Transforms)

Composing multiple classes for a single effect.

| Concept              | CSS Rule                         | Tailwind v4 Class   | `sz` Prop (Canonical)             |
| :------------------- | :------------------------------- | :------------------ | :-------------------------------- |
| **Filter Blur**      | `filter: blur((etc)) (etc)`      | `blur-sm`           | `{ blur: 'sm' }`                  |
| **Filter Grayscale** | `filter: grayscale((etc)) (etc)` | `grayscale`         | `{ grayscale: true }`             |
| **Combined**         | `filter: (etc)`                  | `blur-sm grayscale` | `{ blur: 'sm', grayscale: true }` |

## Arbitrary Values

Mapping precise, non-theme values to JIT syntax (Arbitrary Properties or Values).

| Concept             | CSS Property                  | Tailwind v4 Class              | `sz` Prop (Object Syntax)           | Note                                      |
| :------------------ | :---------------------------- | :----------------------------- | :---------------------------------- | :---------------------------------------- |
| **Arbitrary Color** | `background-color: #316ff6`   | `bg-[#316ff6]`                 | `{ bg: '#316ff6' }`                 | Preferred over inline styles for caching. |
| **Arbitrary Size**  | `width: 333px`                | `w-[333px]`                    | `{ w: '333px' }`                    | Explicit unit required string.            |
| **Data Prop**       | `content: attr(data-content)` | `content-[attr(data-content)]` | `{ content: 'attr(data-content)' }` | Complex arbitrary strings.                |

**Global Parsing Rule**: The compiler **MUST normalize whitespace** in arbitrary variant _keys_ before generation.

- `{ '[ & > span ]': (etc) }` -> `[&>span]:(etc)` — whitespace in arbitrary selector keys is stripped
- Values never need brackets: `{ w: 'calc(100% - 20px)' }` -> `w-[calc(100%_-_20px)]` — the compiler auto-wraps arbitrary values
- This ensures robust matching regardless of user formatting.

## Complex Selectors & Modifiers

Handling `group-*`, `peer-*`, and arbitrary variants.

| Concept                | CSS Rule                              | Tailwind v4 Class         | `sz` Prop (Object Syntax)                   | Note                                                          |
| :--------------------- | :------------------------------------ | :------------------------ | :------------------------------------------ | :------------------------------------------------------------ |
| **Group Hover**        | `.group:hover .group-hover:text-blue` | `group-hover:text-blue`   | `{ group: { hover: { color: 'blue' } } }`   | **Sugar**: Nested `group` key acts as modifier scope.         |
| **Peer Focus**         | `.peer:focus ~ .peer-focus:text-blue` | `peer-focus:text-blue`    | `{ peer: { focus: { color: 'blue' } } }`    | **Sugar**: Nested `peer` key.                                 |
| **Data Attribute**     | `&[data-active] (etc)`                | `data-[active]:text-blue` | `{ data: { active: { color: 'blue' } } }`   | **Sugar**: Maps to `data-[key]`.                              |
| **ARIA Attribute**     | `&[aria-expanded="true"] (etc)`       | `aria-expanded:text-blue` | `{ aria: { expanded: { color: 'blue' } } }` | **Sugar**: Maps to `aria-[key]`.                              |
| **Arbitrary Variant**  | `& > span`                            | `[&>span]:text-blue`      | `{ '[& > span]': { color: 'blue' } }`       |                                                               |
| **Important Modifier** | `color: red !important`               | `text-red-500!`           | `{ color: 'red-500!' }`                     | **New**: Trailing `!` in value maps to trailing `!` in class. |

## Style Conflict Management

Inherently solved by the `sz` object model.

| Concept                   | Traditional Class Issue                              | `sz` Solution                               | Explanation                                                                                                                         |
| :------------------------ | :--------------------------------------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------- |
| **Duplicate Properties**  | `class="p-4 p-8"` (Last one wins based on CSS order) | `{ p: 4, p: 8 }` (Syntax Error or Override) | JS objects cannot have duplicate keys. Last key wins _at source_, predictable.                                                      |
| **Longhand vs Shorthand** | `px-4 p-8` (Conflict)                                | `{ px: 4, p: 8 }`                           | The compiler must handle logical ordering (e.g. general `p` before specific `px`). **Implementation details** in compiler strategy. |

## Prefix Option

Handling global configuration prefixes.

| Concept            | Config          | Tailwind v4 Output | `sz` Prop Input                                                         |
| :----------------- | :-------------- | :----------------- | :---------------------------------------------------------------------- |
| **Utility Prefix** | `prefix: 'tw-'` | `tw-text-center`   | `{ textAlign: 'center' }`                                               |
| **Result**         |                 |                    | Compiler prepends `tw-` to all generated utility classes if configured. |

## Hover, Focus, and Other States

## Pseudo-classes

Standard interactive states.

| Concept                  | Tailwind v4 Class                            | `sz` Prop (Object Syntax)                                                  | Note                        |
| :----------------------- | :------------------------------------------- | :------------------------------------------------------------------------- | :-------------------------- |
| **Hover, Focus, Active** | `hover:bg-red focus:bg-blue active:bg-green` | `{ hover: { bg: 'red' }, focus: { bg: 'blue' }, active: { bg: 'green' } }` |                             |
| **First/Last Child**     | `first:pt-0 last:pb-0`                       | `{ first: { pt: 0 }, last: { pb: 0 } }`                                    |                             |
| **Odd/Even Child**       | `odd:bg-white even:bg-gray`                  | `{ odd: { bg: 'white' }, even: { bg: 'gray' } }`                           |                             |
| **First of Type**        | `first-of-type:block`                        | `{ firstOfType: { block: true } }`                                         | **Sugar**: CamelCase alias. |
| **Only Child**           | `only:block`                                 | `{ only: { block: true } }`                                                |                             |
| **Empty**                | `empty:hidden`                               | `{ empty: { hidden: true } }`                                              |                             |
| **Visited**              | `visited:text-purple`                        | `{ visited: { color: 'purple' } }`                                         |                             |
| **Focus Within**         | `focus-within:ring`                          | `{ focusWithin: { ring: true } }`                                          | **Sugar**: CamelCase alias. |
| **Focus Visible**        | `focus-visible:ring`                         | `{ focusVisible: { ring: true } }`                                         | **Sugar**: CamelCase alias. |
| **Target**               | `target:shadow`                              | `{ target: { shadow: true } }`                                             |                             |

## :has()

Styling based on descendants.

| Concept            | Tailwind v4 Class           | `sz` Prop (Object Syntax)                       | Note                                  |
| :----------------- | :-------------------------- | :---------------------------------------------- | :------------------------------------ |
| **Has Descendant** | `has-[img]:bg-blue`         | `{ has: { img: { bg: 'blue' } } }`              | **Sugar**: Nested selector.           |
| **Has State**      | `has-[:checked]:bg-blue`    | `{ has: { checked: { bg: 'blue' } } }`          | **Sugar**: Auto-detects pseudo-class. |
| **Arbitrary Has**  | `has-[.custom-class]:block` | `{ has: { '.custom-class': { block: true } } }` |                                       |

## Styling based on parent state (Groups)

Styling children based on parent `group` class.

| Concept                      | Tailwind v4 Class                     | `sz` Prop (Object Syntax)                                         | Note                                 |
| :--------------------------- | :------------------------------------ | :---------------------------------------------------------------- | :----------------------------------- |
| **Group Hover**              | `group-hover:text-white`              | `{ group: { hover: { color: 'white' } } }`                        | **Sugar**: Nested scope.             |
| **Group Focus**              | `group-focus:text-white`              | `{ group: { focus: { color: 'white' } } }`                        |                                      |
| **Group Active**             | `group-active:text-white`             | `{ group: { active: { color: 'white' } } }`                       |                                      |
| **Nested Groups**            | `group-hover/name:text-white`         | `{ group: { name: { hover: { color: 'white' } } } }`              | **Sugar**: Scope name as nested key. |
| **Arbitrary Groups**         | `group-[.is-published]:block`         | `{ group: { '.is-published': { block: true } } }`                 |                                      |
| **Group Has**                | `group-has-[a]:block`                 | `{ group: { has: { a: { block: true } } } }`                      |                                      |
| **Group Data**               | `group-data-[active]:text-blue`       | `{ group: { data: { active: { color: 'blue' } } } }`              | **Sugar**: Nested `data` key.        |
| **Group Data (named)**       | `group-data-[active]/card:text-blue`  | `{ group: { card: { data: { active: { color: 'blue' } } } } }`    | Name before `data` key.              |
| **Group Data (value match)** | `group-data-[state=open]:block`       | `{ group: { data: { 'state=open': { block: true } } } }`          | `=` in key → bracket form always.    |
| **Group ARIA**               | `group-aria-expanded:block`           | `{ group: { aria: { expanded: { block: true } } } }`              | Standard states: bare form.          |
| **Group ARIA (arbitrary)**   | `group-aria-[current=page]:font-bold` | `{ group: { aria: { 'current=page': { fontWeight: 'bold' } } } }` | Non-standard: bracket form.          |

## Styling based on sibling state (Peers)

Styling based on previous sibling `peer` class.

| Concept                     | Tailwind v4 Class                   | `sz` Prop (Object Syntax)                                  | Note                                 |
| :-------------------------- | :---------------------------------- | :--------------------------------------------------------- | :----------------------------------- |
| **Peer Hover**              | `peer-hover:text-white`             | `{ peer: { hover: { color: 'white' } } }`                  | **Sugar**: Nested scope.             |
| **Peer Checked**            | `peer-checked:bg-blue`              | `{ peer: { checked: { bg: 'blue' } } }`                    |                                      |
| **Differentiating Peers**   | `peer-checked/name:bg-blue`         | `{ peer: { name: { checked: { bg: 'blue' } } } }`          | **Sugar**: Scope name as nested key. |
| **Arbitrary Peers**         | `peer-[.is-dirty]:block`            | `{ peer: { '.is-dirty': { block: true } } }`               |                                      |
| **Peer Data**               | `peer-data-[active]:text-blue`      | `{ peer: { data: { active: { color: 'blue' } } } }`        | **Sugar**: Nested `data` key.        |
| **Peer Data (value match)** | `peer-data-[state=open]:block`      | `{ peer: { data: { 'state=open': { block: true } } } }`    | `=` in key → bracket form always.    |
| **Peer ARIA**               | `peer-aria-checked:bg-blue`         | `{ peer: { aria: { checked: { bg: 'blue' } } } }`          | Standard states: bare form.          |
| **Peer ARIA (arbitrary)**   | `peer-aria-[invalid=true]:text-red` | `{ peer: { aria: { 'invalid=true': { color: 'red' } } } }` | Non-standard: bracket form.          |

## :not()

Inverse conditions.

| Concept          | Tailwind v4 Class                   | `sz` Prop (Object Syntax)                                    | Note |
| :--------------- | :---------------------------------- | :----------------------------------------------------------- | :--- |
| **Not Hover**    | `not-hover:opacity-75`              | `{ not: { hover: { opacity: 75 } } }`                        |      |
| **Not First**    | `not-first:mt-4`                    | `{ not: { first: { mt: 4 } } }`                              |      |
| **Not Supports** | `not-supports-[display:grid]:block` | `{ not: { supports: { 'display:grid': { block: true } } } }` |      |

## Pseudo-elements

Advanced content styling.

| Concept          | Tailwind v4 Class       | `sz` Prop (Object Syntax)            | Note                  |
| :--------------- | :---------------------- | :----------------------------------- | :-------------------- |
| **Before/After** | `before:content-['']`   | `{ before: { (etc) } }`              | Defaults used.        |
| **Placeholder**  | `placeholder:text-gray` | `{ placeholder: { color: 'gray' } }` |                       |
| **File**         | `file:border`           | `{ file: { border: true } }`         |                       |
| **Marker**       | `marker:text-blue`      | `{ marker: { color: 'blue' } }`      |                       |
| **Selection**    | `selection:bg-pink`     | `{ selection: { bg: 'pink' } }`      |                       |
| **First Line**   | `first-line:uppercase`  | `{ firstLine: { uppercase: true } }` | **Sugar**: CamelCase. |
| **First Letter** | `first-letter:text-7xl` | `{ firstLetter: { text: '7xl' } }`   | **Sugar**: CamelCase. |
| **Backdrop**     | `backdrop:blur`         | `{ backdrop: { blur: true } }`       |                       |

## Media & Feature Queries

Environment-based styling.

| Concept               | Tailwind v4 Class                 | `sz` Prop (Object Syntax)                           | Note                          |
| :-------------------- | :-------------------------------- | :-------------------------------------------------- | :---------------------------- |
| **Breakpoints**       | `md:block lg:flex`                | `{ md: { block: true }, lg: { flex: true } }`       |                               |
| **Container Queries** | `@md:block @lg:flex`              | `{ '@md': { block: true }, '@lg': { flex: true } }` | **Note**: String key for `@`. |
| **Reduced Motion**    | `motion-reduce:hidden`            | `{ motionReduce: { hidden: true } }`                | **Sugar**: CamelCase.         |
| **Prefers Contrast**  | `contrast-more:border`            | `{ contrastMore: { border: true } }`                |                               |
| **Forced Colors**     | `forced-colors:border-gray`       | `{ forcedColors: { borderColor: 'gray' } }`         | **Sugar**: CamelCase.         |
| **Inverted Colors**   | `inverted-colors:invert`          | `{ invertedColors: { invert: true } }`              | **Sugar**: CamelCase.         |
| **Pointer**           | `pointer-coarse:p-4`              | `{ pointerCoarse: { p: 4 } }`                       | **Sugar**: CamelCase.         |
| **Any-Pointer**       | `any-pointer-fine:cursor-pointer` | `{ anyPointerFine: { cursor: 'pointer' } }`         | v4.1. **Sugar**: CamelCase.   |
| **User Valid**        | `user-valid:border-green-500`     | `{ userValid: { borderColor: 'green-500' } }`       | v4.1. Form validation state.  |
| **User Invalid**      | `user-invalid:border-red-500`     | `{ userInvalid: { borderColor: 'red-500' } }`       | v4.1. Form validation state.  |
| **Details Content**   | `details-content:block`           | `{ detailsContent: { block: true } }`               | v4.1. **Sugar**: CamelCase.   |
| **Print**             | `print:hidden`                    | `{ print: { hidden: true } }`                       |                               |
| **Orientation**       | `portrait:hidden`                 | `{ portrait: { hidden: true } }`                    |                               |
| **Scripting**         | `noscript:block`                  | `{ noscript: { block: true } }`                     |                               |
| **Supports**          | `supports-[display:grid]:grid`    | `{ supports: { 'display:grid': { grid: true } } }`  |                               |
| **Starting Style**    | `starting:opacity-0`              | `{ starting: { opacity: 0 } }`                      |                               |

## Attribute Selectors

Data and state attributes.

| Concept             | Tailwind v4 Class       | `sz` Prop (Object Syntax)               | Note |
| :------------------ | :---------------------- | :-------------------------------------- | :--- |
| **Data Attributes** | `data-[active]:bg-blue` | `{ data: { active: { bg: 'blue' } } }`  |      |
| **ARIA States**     | `aria-checked:bg-blue`  | `{ aria: { checked: { bg: 'blue' } } }` |      |
| **RTL/LTR**         | `rtl:mr-2`              | `{ rtl: { mr: 2 } }`                    |      |
| **Open**            | `open:bg-white`         | `{ open: { bg: 'white' } }`             |      |
| **Inert**           | `inert:opacity-50`      | `{ inert: { opacity: 50 } }`            |      |

## Helper Variants (Child/Descendants)

Mapping for common descendant patterns.

| Concept             | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                    |
| :------------------ | :---------------- | :------------------------ | :---------------------- |
| **Direct Children** | `*:p-4`           | `{ '*': { p: 4 } }`       | Map `*` to `*` variant. |
| **Descendants**     | `[&_*]:p-4`       | `{ '[&_*]': { p: 4 } }`   | Raw selector fallback.  |

## Custom Variants

Extensibility.

| Concept         | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                               |
| :-------------- | :---------------- | :------------------------ | :----------------------------------------------------------------- |
| **Custom Name** | `my-variant:p-4`  | `{ myVariant: { p: 4 } }` | **Rule**: Users can use CamelCase key matching registered variant. |

## Responsive design

Targeting specific screen sizes and container states.

| Concept                  | CSS Rule                    | Tailwind v4 Class         | `sz` Prop (Object Syntax)                         | Note                                |
| :----------------------- | :-------------------------- | :------------------------ | :------------------------------------------------ | :---------------------------------- |
| **Mobile First**         | `min-width: (etc)`          | `w-full md:w-1/2`         | `{ w: 'full', md: { w: '1/2' } }`                 | Unprefixed utilities target mobile. |
| **Breakpoint Range**     | `768px <= width < 1280px`   | `md:max-xl:flex`          | `{ md: { maxXl: { flex: true } } }`               | **Sugar**: CamelCase for `max-xl`.  |
| **Single Breakpoint**    | `md only`                   | `md:max-lg:flex`          | `{ md: { maxLg: { flex: true } } }`               | Target specific range.              |
| **Custom Breakpoint**    | `@media (min-width: 320px)` | `min-[320px]:text-center` | `{ min: { '[320px]': { textAlign: 'center' } } }` | Arbitrary one-off breakpoint.       |
| **Max-Width Breakpoint** | `@media (max-width: 600px)` | `max-[600px]:bg-sky-300`  | `{ max: { '[600px]': { bg: 'sky-300' } } }`       |                                     |

## Container Query Disambiguation

> ⚠️ **IMPORTANT:** `container` and `@container` are **different** Tailwind classes!

## Container Utility (max-width responsive)

The `container` class sets `width: 100%` and applies responsive max-widths.

| CSS           | Tailwind    | sz Prop               |
| ------------- | ----------- | --------------------- |
| `width: 100%` | `container` | `{ container: true }` |

## Container Query Rule

The `@container` class enables CSS container queries.

| Concept                  | Tailwind v4 Class    | `sz` Prop (Object Syntax)                   | Note                                      |
| :----------------------- | :------------------- | :------------------------------------------ | :---------------------------------------- |
| **Mark Container**       | `@container`         | `{ '@container': true }`                    |                                           |
| **Named Container**      | `@container/sidebar` | `{ '@container': 'sidebar' }`               | **Sugar**: Value string = container name. |
| **Container Breakpoint** | `@md:flex`           | `{ '@md': { flex: true } }`                 | **Note**: `@` prefix in key.              |
| **Named Query**          | `@md/sidebar:block`  | `{ '@md': { sidebar: { block: true } } }`   | **Sugar**: Nest name inside query key.    |
| **Container Range**      | `@sm:@max-md:block`  | `{ '@sm': { '@maxMd': { block: true } } }`  |                                           |
| **Arbitrary Query**      | `@min-[475px]:flex`  | `{ '@min': { '[475px]': { flex: true } } }` |                                           |
| **Container Units**      | `w-[50cqw]`          | `{ w: '50cqw' }`                            |                                           |

## Dark mode

Styling for dark color schemes.

| Concept               | CSS Rule                              | Tailwind v4 Class | `sz` Prop (Object Syntax)    | Note                                       |
| :-------------------- | :------------------------------------ | :---------------- | :--------------------------- | :----------------------------------------- |
| **Media Strategy**    | `@media (prefers-color-scheme: dark)` | `dark:bg-black`   | `{ dark: { bg: 'black' } }`  | Default behavior.                          |
| **Selector Strategy** | `.dark &`                             | `dark:bg-black`   | `{ dark: { bg: 'black' } }`  | Enabled via config `darkMode: 'selector'`. |
| **Variant**           | `[data-mode="dark"] &`                | `dark:bg-black`   | `{ dark: { bg: 'black' } }`  | Custom selector config.                    |
| **Force Light**       | N/A                                   | `light:bg-white`  | `{ light: { bg: 'white' } }` | Override dark mode.                        |

## Theme variables

Using design tokens.

| Concept              | CSS Rule                       | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note                                                   |
| :------------------- | :----------------------------- | :------------------ | :------------------------ | :----------------------------------------------------- |
| **Using Theme Var**  | `color: var(--color-mint-500)` | `text-mint-500`     | `{ color: 'mint-500' }`   | **Rule**: Use the utility name derived from variable.  |
| **Arbitrary Var**    | `width: var(--spacing-4)`      | `w-(--spacing-4)`   | `{ w: '--spacing-4' }`    | **Sugar**: Auto-detects `--` prefix and wraps in `()`. |
| **Var In Arbitrary** | `padding: var(--my-pad)`       | `p-[var(--my-pad)]` | `{ p: 'var(--my-pad)' }`  |                                                        |

## Colors

Palette and opacity.

| Concept               | CSS Rule                  | Tailwind v4 Class       | `sz` Prop (Object Syntax)                      | Note                                             |
| --------------------- | ------------------------- | ----------------------- | ---------------------------------------------- | ------------------------------------------------ |
| **Standard Color**    | `background-color: (etc)` | `bg-blue-500`           | `{ bg: 'blue-500' }`                           |                                                  |
| **Opacity Modifier**  | `(etc) / 0.5`             | `bg-blue-500/50`        | `{ bg: { color: 'blue-500', op: 50 } }`        | v4: any integer is bare.                         |
| **Opacity 0.5-step**  | `(etc) / 0.755`           | `bg-black/75.5`         | `{ bg: { color: 'black', op: 75.5 } }`         | Decimals with 0.5 step are bare.                 |
| **Arbitrary Opacity** | `(etc) / 0.73`            | `bg-pink-500/[78%]`     | `{ bg: { color: 'pink-500', op: '78%' } }`     | `%`, leading `.`, non-0.5 decimals go to `[]`.   |
| **Variable Opacity**  | `(etc) / var(--alpha)`    | `bg-blue-500/(--alpha)` | `{ bg: { color: 'blue-500', op: '--alpha' } }` | Color opacity modifiers use `()` for CSS vars.   |
| **Inherited Opacity** | `color-mix((etc))`        | `text-current/50`       | `{ color: { color: 'current', op: 50 } }`      | Use `current` color to modify inherited opacity. |

## Adding custom styles

Extending the framework.

## Using arbitrary values

One-off values without configuration.

| Concept             | CSS Property             | Tailwind v4 Class     | `sz` Prop (Object Syntax)   | Note                            |
| :------------------ | :----------------------- | :-------------------- | :-------------------------- | :------------------------------ |
| **Arbitrary Value** | `mask-image: url((etc))` | `mask-[url((etc))]`   | `{ mask: 'url((etc))' }`    | Auto-detects custom value.      |
| **Arbitrary Prop**  | `mask-type: luminance`   | `mask-type-luminance` | `{ maskType: 'luminance' }` | Maps known props automatically. |
| **CSS Variable**    | `--my-var: 10px`         | `[--my-var:10px]`     | `{ '--my-var': '10px' }`    | String key for unknowns.        |

## Using custom CSS & Plugins

Integrating external styles.

| Concept        | Tailwind v4 Approach   | `sz` Equivalent         | Note                              |
| :------------- | :--------------------- | :---------------------- | :-------------------------------- |
| **CSS Import** | `@import "custom.css"` | `import './custom.css'` | Standard module bundler behavior. |
| **Plugin**     | `@plugin "my-plugin"`  | Config `plugins: []`    | Compiler configuration.           |

## Functions & directives

Configuration and logic.

| Concept            | Config                | Tailwind v4 Output | `sz` Prop Input           | Note                                            |
| :----------------- | :-------------------- | :----------------- | :------------------------ | :---------------------------------------------- |
| **Utility Prefix** | `prefix: 'tw-'`       | `tw-text-center`   | `{ textAlign: 'center' }` |                                                 |
| **@apply**         | `@apply items-center` | N/A                | `{ (etc)commonOps }`      | **Discouraged**: Use JS Object Spread.          |
| **theme()**        | `theme('spacing.4')`  | `w-(--spacing-4)`  | `{ w: '--spacing-4' }`    | **Rule**: Use CSS Variable sugar (no parens).   |
| **@utility**       | `@utility tab-active` | `tab-active`       | `{ tabActive: true }`     | **Blind Support**: CamelCase maps to ClassName. |
| **@theme**         | `@theme { (etc) }`    | N/A                | N/A                       | Configured in CSS, used via Vars/Classes.       |

## Detecting classes in source files

Strategy for static analysis vs runtime generation.

**Core Decision**: `CSSzyx` uses **AST Parsing**, not Regex Scanning. This allows for smarter static extraction and shake-tree logic.

| Concept                       | Tailwind Scanner (Regex) | `sz` Compiler (AST)      | Note                                                                                                                                                                                                                       |
| :---------------------------- | :----------------------- | :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **String Interpolation**      | ❌ Fails `bg-${color}`   | ✅ **Runtime Support**   | Compiler marks as dynamic, handled at runtime via variable injection.                                                                                                                                                      |
| **Conditionals**              | ❌ Fails logic           | ✅ **Static Extraction** | `{ bg: active ? 'blue' : 'gray' }` and `{ scale: shrunk ? 75 : 100 }` → both branches compiled to static Tailwind classes at build time. CSS variable fallback only when a branch is a runtime expression (not a literal). |
| **Variable reference**        | ❌ Not applicable        | ✅ **Build time**        | `sz={myVar}` — pass variable directly when no override needed. Compiler resolves the binding to its object literal initializer (incl. `as const`, `satisfies`, explicit type annotation).                                  |
| **Object Spread**             | ❌ Fails spread          | ✅ **Static Analysis**   | `sz={{ ...baseProps, key: val }}` — use spread only when overriding/adding; last key wins. Resolved at build time for local literals. Multiple/nested spreads supported. Imported vars fall back to `_sz()` — no crash.    |
| **Array variable items**      | ❌ Not applicable        | ✅ **Build time**        | `sz={[varA, varB]}` and `sz={[varA, cond && varB]}` — variable array elements resolved at build time. Static elements merged to single string; conditional elements use `_szMerge` at runtime.                             |
| **Ternary variable branches** | ❌ Not applicable        | ✅ **Build time**        | `sz={cond ? varA : varB}` — both branches compiled to static strings when variables are local literals.                                                                                                                    |
| **Chained variables**         | ❌ Not applicable        | ✅ **Build time**        | `const b = { ...a, key: val }; <div sz={b} />` — compiler resolves the chain recursively.                                                                                                                                  |
| **Safelist**                  | Required for dynamic     | **Not Required**         | Auto-detected for static logic; Auto-injected for runtime values.                                                                                                                                                          |

**Performance Rule**: Prefer **Static Strings** in `sz` objects.

- ✅ `sz({ color: isErr ? 'red-500' : 'green-500' })` (Zero Runtime)
- ⚠️ `sz({ color:`red-${shade}`})` (Runtime injection overhead)


# Backgrounds

Controlling the background of an element.

## Background Color

| Concept               | CSS Rule                                  | Tailwind v4 Class    | `sz` Prop (Object Syntax)                  | Note                                             |
| :-------------------- | :---------------------------------------- | :------------------- | :----------------------------------------- | :----------------------------------------------- |
| **Color**             | `background-color: ...`                   | `bg-blue-500`        | `{ bg: 'blue-500' }`                       |                                                  |
| **Inherit**           | `background-color: inherit`               | `bg-inherit`         | `{ bg: 'inherit' }`                        |                                                  |
| **Current**           | `background-color: currentColor`          | `bg-current`         | `{ bg: 'current' }`                        |                                                  |
| **Transparent**       | `background-color: transparent`           | `bg-transparent`     | `{ bg: 'transparent' }`                    |                                                  |
| **Arbitrary**         | `background-color: #333`                  | `bg-[#333]`          | `{ bg: '#333' }`                           |                                                  |
| **CSS Variable**      | `background-color: var(--my-color)`       | `bg-(--my-color)`    | `{ bg: '--my-color' }`                     | **Sugar**: Auto-detects `--`.                    |
| **With Opacity**      | `background-color: rgb(59 130 246 / 20%)` | `bg-blue-500/20`     | `{ bg: { color: 'blue-500', op: 20 } }`    | String slash (`'blue-500/20'`) is not supported. |
| **CSS Var + Opacity** | `background-color: var(--c) / 50%`        | `bg-(--my-color)/50` | `{ bg: { color: '--my-color', op: 50 } }`  | CSS variables are auto-wrapped in `(...)`.       |
| **Hex + Opacity**     | `background-color: #0d0d12` at 90%        | `bg-[#0d0d12]/90`    | `{ bg: { color: '#0d0d12', op: 90 } }`     | Hex/rgb/hsl values are auto-wrapped in `[...]`.  |
| **Decimal Opacity**   | `background-color: black / 5%`            | `bg-black/[0.05]`    | `{ bg: { color: 'black', op: 0.05 } }`     | Non-half-step decimals use arbitrary `/[0.05]`.  |
| **Percent Opacity**   | `background-color: pink-500 / 78%`        | `bg-pink-500/[78%]`  | `{ bg: { color: 'pink-500', op: '78%' } }` | String with `%` stays arbitrary.                 |

## Background Image

### String Patterns (Simple Cases)

| Concept              | CSS Rule                                           | Tailwind v4 Class                     | `sz` Prop (Object Syntax)                                                                                      | Note                               |
| :------------------- | :------------------------------------------------- | :------------------------------------ | :------------------------------------------------------------------------------------------------------------- | :--------------------------------- |
| **URL**              | `background-image: url(...)`                       | `bg-[url(...)]`                       | `{ bgImg: 'url(...)' }`                                                                                        |                                    |
| **None**             | `background-image: none`                           | `bg-none`                             | `{ bgImg: 'none' }`                                                                                            |                                    |
| **CSS Variable**     | `background-image: var(--my-image)`                | `bg-(image:--my-image)`               | `{ bgImg: '--my-image' }`                                                                                      | **Sugar**: Auto-detects `--`.      |
| **Repeating Linear** | `background-image: repeating-linear-gradient(...)` | `bg-[repeating-linear-gradient(...)]` | `{ bgImg: 'repeating-linear-gradient(315deg,currentColor 0,currentColor 1px,transparent 0,transparent 50%)' }` | Spaces normalised to `_` in class. |
| **Repeating Radial** | `background-image: repeating-radial-gradient(...)` | `bg-[repeating-radial-gradient(...)]` | `{ bgImg: 'repeating-radial-gradient(circle, red 0, blue 10px)' }`                                             |                                    |

### Object Patterns (Gradients)

**TypeScript Interface:**

```typescript
type BgImgValue = string | BgImgGradient;
type BgImgGradient = {
  gradient: "linear" | "radial" | "conic";
  dir?: string | number; // OPTIONAL
  in?: ColorInterpolation;
};
type ColorInterpolation =
  | "srgb"
  | "hsl"
  | "oklab"
  | "oklch"
  | "longer"
  | "shorter"
  | "increasing"
  | "decreasing";
```

#### Linear Gradient

| Concept                | CSS Rule                                 | Tailwind v4 Class              | `sz` Prop (Object Syntax)                                    | Note                                                      |
| :--------------------- | :--------------------------------------- | :----------------------------- | :----------------------------------------------------------- | :-------------------------------------------------------- |
| **Default**            | `linear-gradient(to right, ...)`         | `bg-linear-to-r`               | `{ bgImg: { gradient: 'linear' } }`                          | Default: `dir='to-r'`                                     |
| **Direction Keyword**  | `linear-gradient(to right, ...)`         | `bg-linear-to-r`               | `{ bgImg: { gradient: 'linear', dir: 'to-r' } }`             | All 8: to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl |
| **Positive Angle**     | `linear-gradient(<number>deg, ...)`      | `bg-linear-<number>`           | `{ bgImg: { gradient: 'linear', dir: <number> } }`           | v4: any integer bare                                      |
| **Negative Angle**     | `linear-gradient(-<number>deg, ...)`     | `-bg-linear-<number>`          | `{ bgImg: { gradient: 'linear', dir: -<number> } }`          | v4: any integer bare                                      |
| **Arbitrary**          | `linear-gradient(25deg, red 5%...)`      | `bg-linear-[25deg,_red_5%...]` | `{ bgImg: { gradient: 'linear', dir: '25deg, red 5%...' } }` |                                                           |
| **CSS Variable**       | `linear-gradient(var(--my-gradient))`    | `bg-linear-(--var)`            | `{ bgImg: { gradient: 'linear', dir: '--var' } }`            | **Sugar**: Auto-detects `--`.                             |
| **With Interpolation** | `linear-gradient(in hsl, to right, ...)` | `bg-linear-to-r/hsl`           | `{ bgImg: { gradient: 'linear', dir: 'to-r', in: 'hsl' } }`  | Appends `/method` suffix                                  |

#### Radial Gradient

| Concept                | CSS Rule                            | Tailwind v4 Class        | `sz` Prop (Object Syntax)                              | Note                           |
| :--------------------- | :---------------------------------- | :----------------------- | :----------------------------------------------------- | :----------------------------- |
| **Default**            | `radial-gradient(...)`              | `bg-radial`              | `{ bgImg: { gradient: 'radial' } }`                    | `dir` optional, default center |
| **Position**           | `radial-gradient(at 50% 75%, ...)`  | `bg-radial-[at_50%_75%]` | `{ bgImg: { gradient: 'radial', dir: 'at 50% 75%' } }` |                                |
| **CSS Variable**       | `radial-gradient(var(--my-radial))` | `bg-radial-(--var)`      | `{ bgImg: { gradient: 'radial', dir: '--var' } }`      | **Sugar**: Auto-detects `--`.  |
| **With Interpolation** | `radial-gradient(in oklab, ...)`    | `bg-radial/oklab`        | `{ bgImg: { gradient: 'radial', in: 'oklab' } }`       | Appends `/method` suffix       |

#### Conic Gradient

| Concept            | CSS Rule                                  | Tailwind v4 Class                          | `sz` Prop (Object Syntax)                                                | Note                          |
| :----------------- | :---------------------------------------- | :----------------------------------------- | :----------------------------------------------------------------------- | :---------------------------- |
| **Default**        | `conic-gradient(...)`                     | `bg-conic`                                 | `{ bgImg: { gradient: 'conic' } }`                                       | No dir → `bg-conic`           |
| **Positive Angle** | `conic-gradient(from <number>deg, ...)`   | `bg-conic-<number>`                        | `{ bgImg: { gradient: 'conic', dir: <number> } }`                        | v4: any integer bare          |
| **Negative Angle** | `conic-gradient(from -<number>deg, ...)`  | `-bg-conic-<number>`                       | `{ bgImg: { gradient: 'conic', dir: -<number> } }`                       | v4: any integer bare          |
| **Arbitrary**      | `conic-gradient(in hsl shorter hue, ...)` | `bg-conic-[in_hsl_shorter_hue,_red,_blue]` | `{ bgImg: { gradient: 'conic', dir: 'in hsl shorter hue, red, blue' } }` |                               |
| **CSS Variable**   | `conic-gradient(var(--my-conic))`         | `bg-conic-(--var)`                         | `{ bgImg: { gradient: 'conic', dir: '--var' } }`                         | **Sugar**: Auto-detects `--`. |

### Color Interpolation (`in` key)

Appends `/method` suffix to gradient class:

| `in` value   | Suffix        | Example Output              |
| :----------- | :------------ | :-------------------------- |
| `srgb`       | `/srgb`       | `bg-linear-to-r/srgb`       |
| `hsl`        | `/hsl`        | `bg-linear-to-r/hsl`        |
| `oklab`      | `/oklab`      | `bg-linear-to-r/oklab`      |
| `oklch`      | `/oklch`      | `bg-linear-to-r/oklch`      |
| `longer`     | `/longer`     | `bg-linear-to-r/longer`     |
| `shorter`    | `/shorter`    | `bg-linear-to-r/shorter`    |
| `increasing` | `/increasing` | `bg-linear-to-r/increasing` |
| `decreasing` | `/decreasing` | `bg-linear-to-r/decreasing` |

## Gradient Color Stops

| Concept                        | CSS Rule                  | Tailwind v4 Class   | `sz` Prop (Object Syntax)   | Note                                                        |
| :----------------------------- | :------------------------ | :------------------ | :-------------------------- | :---------------------------------------------------------- |
| **From**                       | `--tw-gradient-from: ...` | `from-blue-500`     | `{ from: 'blue-500' }`      |                                                             |
| **Via**                        | `--tw-gradient-via: ...`  | `via-blue-500`      | `{ via: 'blue-500' }`       |                                                             |
| **To**                         | `--tw-gradient-to: ...`   | `to-blue-500`       | `{ to: 'blue-500' }`        |                                                             |
| **From Position**              | `... <number>%`           | `from-<number>%`    | `{ fromPos: <number> }`     | v4: fully dynamic, no static scale, accept any integer bare |
| **From Position Arbitrary**    | `... <decimal>%`          | `from-[<decimal>%]` | `{ fromPos: <decimal> }`    |                                                             |
| **From Position Arbitrary**    | `... 300px`               | `from-[300px]`      | `{ fromPos: '300px' }`      |                                                             |
| **From Position CSS Variable** | `... var(--from-pos)`     | `from-(--from-pos)` | `{ fromPos: '--from-pos' }` | **Sugar**: Auto-detects `--`.                               |
| **Via Position**               | `... <number>%`           | `via-<number>%`     | `{ viaPos: <number> }`      | v4: fully dynamic, no static scale, accept any integer bare |
| **Via Position Arbitrary**     | `... <decimal>%`          | `via-[<decimal>%]`  | `{ viaPos: <decimal> }`     |                                                             |
| **Via Position Arbitrary**     | `... 300px`               | `via-[300px]`       | `{ viaPos: '300px' }`       |                                                             |
| **Via Position CSS Variable**  | `... var(--via-pos)`      | `via-(--via-pos)`   | `{ viaPos: '--via-pos' }`   | **Sugar**: Auto-detects `--`.                               |
| **To Position**                | `... <number>%`           | `to-<number>%`      | `{ toPos: <number> }`       | v4: fully dynamic, no static scale, accept any integer bare |
| **To Position Arbitrary**      | `... <decimal>%`          | `to-[<decimal>%]`   | `{ toPos: <decimal> }`      |                                                             |
| **To Position Arbitrary**      | `... 300px`               | `to-[300px]`        | `{ toPos: '300px' }`        |                                                             |
| **To Position CSS Variable**   | `... var(--to-pos)`       | `to-(--to-pos)`     | `{ toPos: '--to-pos' }`     | **Sugar**: Auto-detects `--`.                               |

## Background Position

| Concept          | CSS Rule                               | Tailwind v4 Class      | `sz` Prop (Object Syntax)      | Note                          |
| :--------------- | :------------------------------------- | :--------------------- | :----------------------------- | :---------------------------- |
| **Top Left**     | `background-position: top left`        | `bg-top-left`          | `{ bgPos: 'top-left' }`        |                               |
| **Top**          | `background-position: top`             | `bg-top`               | `{ bgPos: 'top' }`             |                               |
| **Top Right**    | `background-position: top right`       | `bg-top-right`         | `{ bgPos: 'top-right' }`       |                               |
| **Left**         | `background-position: left`            | `bg-left`              | `{ bgPos: 'left' }`            |                               |
| **Center**       | `background-position: center`          | `bg-center`            | `{ bgPos: 'center' }`          |                               |
| **Right**        | `background-position: right`           | `bg-right`             | `{ bgPos: 'right' }`           |                               |
| **Bottom Left**  | `background-position: bottom left`     | `bg-bottom-left`       | `{ bgPos: 'bottom-left' }`     |                               |
| **Bottom**       | `background-position: bottom`          | `bg-bottom`            | `{ bgPos: 'bottom' }`          |                               |
| **Bottom Right** | `background-position: bottom right`    | `bg-bottom-right`      | `{ bgPos: 'bottom-right' }`    |                               |
| **Arbitrary**    | `background-position: center top 1rem` | `bg-[center_top_1rem]` | `{ bgPos: 'center top 1rem' }` |                               |
| **CSS Variable** | `background-position: var(--bg-pos)`   | `bg-(--bg-pos)`        | `{ bgPos: '--bg-pos' }`        | **Sugar**: Auto-detects `--`. |

## Background Size

| Concept          | CSS Rule                          | Tailwind v4 Class      | `sz` Prop (Object Syntax)  | Note                          |
| :--------------- | :-------------------------------- | :--------------------- | :------------------------- | :---------------------------- |
| **Auto**         | `background-size: auto`           | `bg-auto`              | `{ bgSize: 'auto' }`       |                               |
| **Cover**        | `background-size: cover`          | `bg-cover`             | `{ bgSize: 'cover' }`      |                               |
| **Contain**      | `background-size: contain`        | `bg-contain`           | `{ bgSize: 'contain' }`    |                               |
| **Arbitrary**    | `background-size: auto 100px`     | `bg-size-[auto_100px]` | `{ bgSize: 'auto 100px' }` |                               |
| **CSS Variable** | `background-size: var(--bg-size)` | `bg-size-(--bg-size)`  | `{ bgSize: '--bg-size' }`  | **Sugar**: Auto-detects `--`. |

## Background Attachment

| Concept    | CSS Rule                        | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :--------- | :------------------------------ | :---------------- | :------------------------ | :--- |
| **Fixed**  | `background-attachment: fixed`  | `bg-fixed`        | `{ bgAttach: 'fixed' }`   |      |
| **Local**  | `background-attachment: local`  | `bg-local`        | `{ bgAttach: 'local' }`   |      |
| **Scroll** | `background-attachment: scroll` | `bg-scroll`       | `{ bgAttach: 'scroll' }`  |      |

## Background Clip

| Concept     | CSS Rule                       | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :---------- | :----------------------------- | :---------------- | :------------------------ | :--- |
| **Border**  | `background-clip: border-box`  | `bg-clip-border`  | `{ bgClip: 'border' }`    |      |
| **Padding** | `background-clip: padding-box` | `bg-clip-padding` | `{ bgClip: 'padding' }`   |      |
| **Content** | `background-clip: content-box` | `bg-clip-content` | `{ bgClip: 'content' }`   |      |
| **Text**    | `background-clip: text`        | `bg-clip-text`    | `{ bgClip: 'text' }`      |      |

## Background Repeat

| Concept       | CSS Rule                       | Tailwind v4 Class | `sz` Prop (Object Syntax)   | Note |
| :------------ | :----------------------------- | :---------------- | :-------------------------- | :--- |
| **Repeat**    | `background-repeat: repeat`    | `bg-repeat`       | `{ bgRepeat: 'repeat' }`    |      |
| **No Repeat** | `background-repeat: no-repeat` | `bg-no-repeat`    | `{ bgRepeat: 'no-repeat' }` |      |
| **Repeat X**  | `background-repeat: repeat-x`  | `bg-repeat-x`     | `{ bgRepeat: 'repeat-x' }`  |      |
| **Repeat Y**  | `background-repeat: repeat-y`  | `bg-repeat-y`     | `{ bgRepeat: 'repeat-y' }`  |      |
| **Round**     | `background-repeat: round`     | `bg-repeat-round` | `{ bgRepeat: 'round' }`     |      |
| **Space**     | `background-repeat: space`     | `bg-repeat-space` | `{ bgRepeat: 'space' }`     |      |

## Background Origin

| Concept     | CSS Rule                         | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note |
| :---------- | :------------------------------- | :------------------ | :------------------------ | :--- |
| **Border**  | `background-origin: border-box`  | `bg-origin-border`  | `{ bgOrigin: 'border' }`  |      |
| **Padding** | `background-origin: padding-box` | `bg-origin-padding` | `{ bgOrigin: 'padding' }` |      |
| **Content** | `background-origin: content-box` | `bg-origin-content` | `{ bgOrigin: 'content' }` |      |


# Borders

Controlling borders, outlines, rings, and dividers.

## Border Radius

Controlling the border radius of an element.

| Concept             | CSS Rule                                                                    | Tailwind v4 Class                                                                                               | `sz` Prop (Object Syntax) | Note                          |
| :------------------ | :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- | :------------------------ | :---------------------------- |
| **All Sides**       | `border-radius: 0.25rem`                                                    | `rounded`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full` | `{ rounded: 'sm' }`       |                               |
| **None**            | `border-radius: 0px`                                                        | `rounded-none`                                                                                                  | `{ rounded: 'none' }`     |                               |
| **Top**             | `border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem`       | `rounded-t-sm`                                                                                                  | `{ roundedT: 'sm' }`      |                               |
| **Right**           | `border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem`   | `rounded-r-sm`                                                                                                  | `{ roundedR: 'sm' }`      |                               |
| **Bottom**          | `border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem` | `rounded-b-sm`                                                                                                  | `{ roundedB: 'sm' }`      |                               |
| **Left**            | `border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem`     | `rounded-l-sm`                                                                                                  | `{ roundedL: 'sm' }`      |                               |
| **Top Left**        | `border-top-left-radius`                                                    | `rounded-tl-sm`                                                                                                 | `{ roundedTl: 'sm' }`     |                               |
| **Top Right**       | `border-top-right-radius`                                                   | `rounded-tr-sm`                                                                                                 | `{ roundedTr: 'sm' }`     |                               |
| **Bottom Right**    | `border-bottom-right-radius`                                                | `rounded-br-sm`                                                                                                 | `{ roundedBr: 'sm' }`     |                               |
| **Bottom Left**     | `border-bottom-left-radius`                                                 | `rounded-bl-sm`                                                                                                 | `{ roundedBl: 'sm' }`     |                               |
| **Start (Logical)** | `border-start-start-radius`                                                 | `rounded-s-sm`                                                                                                  | `{ roundedS: 'sm' }`      |                               |
| **End (Logical)**   | `border-end-end-radius`                                                     | `rounded-e-sm`                                                                                                  | `{ roundedE: 'sm' }`      |                               |
| **Start-Start**     | `border-start-start-radius`                                                 | `rounded-ss-sm`                                                                                                 | `{ roundedSs: 'sm' }`     |                               |
| **Start-End**       | `border-start-end-radius`                                                   | `rounded-se-sm`                                                                                                 | `{ roundedSe: 'sm' }`     |                               |
| **End-Start**       | `border-end-start-radius`                                                   | `rounded-es-sm`                                                                                                 | `{ roundedEs: 'sm' }`     |                               |
| **End-End**         | `border-end-end-radius`                                                     | `rounded-ee-sm`                                                                                                 | `{ roundedEe: 'sm' }`     |                               |
| **Arbitrary**       | `border-radius: 5px`                                                        | `rounded-[5px]`                                                                                                 | `{ rounded: '5px' }`      |                               |
| **CSS Variable**    | `border-radius: var(--r)`                                                   | `rounded-(--r)`                                                                                                 | `{ rounded: '--r' }`      | **Sugar**: Auto-detects `--`. |

## Border Width

Controlling the width of an element's borders.

| Concept         | CSS Rule                    | Tailwind v4 Class                              | `sz` Prop (Object Syntax)        | Note                      |
| :-------------- | :-------------------------- | :--------------------------------------------- | :------------------------------- | :------------------------ |
| **All Sides**   | `border-width: 1px`         | `border`                                       | `{ border: true }`               | **Default**: 1px.         |
| **Width Scale** | `border-width: 2px`         | `border-0`, `border-2`, `border-4`, `border-8` | `{ border: 0 }`, `{ border: 2 }` |                           |
| **X Axis**      | `border-inline-width: 2px`  | `border-x-2`                                   | `{ borderX: 2 }`                 |                           |
| **Y Axis**      | `border-block-width: 2px`   | `border-y-2`                                   | `{ borderY: 2 }`                 |                           |
| **Top**         | `border-top-width: 2px`     | `border-t-2`                                   | `{ borderT: 2 }`                 |                           |
| **Right**       | `border-right-width: 2px`   | `border-r-2`                                   | `{ borderR: 2 }`                 |                           |
| **Bottom**      | `border-bottom-width: 2px`  | `border-b-2`                                   | `{ borderB: 2 }`                 |                           |
| **Left**        | `border-left-width: 2px`    | `border-l-2`                                   | `{ borderL: 2 }`                 |                           |
| **Start**       | `border-inline-start-width` | `border-s-2`                                   | `{ borderS: 2 }`                 |                           |
| **End**         | `border-inline-end-width`   | `border-e-2`                                   | `{ borderE: 2 }`                 |                           |
| **Block Start** | `border-block-start-width`  | `border-bs-2`                                  | `{ borderBs: 2 }`                | v4.2: logical block-side. |
| **Block End**   | `border-block-end-width`    | `border-be-2`                                  | `{ borderBe: 2 }`                | v4.2: logical block-side. |
| **Arbitrary**   | `border-width: 3px`         | `border-[3px]`                                 | `{ border: '3px' }`              |                           |
| **Variable**    | `border-width: var(--w)`    | `border-(--w)`                                 | `{ border: '--w' }`              |                           |

## Border Color

Controlling the color of an element's borders.

| Concept               | CSS Rule                      | Tailwind v4 Class   | `sz` Prop (Object Syntax)                       | Note                                       |
| :-------------------- | :---------------------------- | :------------------ | :---------------------------------------------- | :----------------------------------------- |
| **Color**             | `border-color: currentColor`  | `border-red-500`    | `{ borderColor: 'red-500' }`                    |                                            |
| **Opacity**           | `border-color: currentColor`  | `border-red-500/50` | `{ borderColor: { color: 'red-500', op: 50 } }` |                                            |
| **CSS Var + Opacity** | `border-color: var(--c) / 50` | `border-(--c)/50`   | `{ borderColor: { color: '--c', op: 50 } }`     | CSS variables are auto-wrapped in `(...)`. |
| **X/Y/T/R/B/L**       | `border-color: currentColor`  | `border-t-red-500`  | `{ borderTColor: 'red-500' }`                   | Verbose keys to avoid conflict with Width. |
| **Arbitrary**         | `border-color: currentColor`  | `border-[#50d71e]`  | `{ borderColor: '#50d71e' }`                    |                                            |
| **Variable**          | `border-color: var(--c)`      | `border-(--c)`      | `{ borderColor: '--c' }`                        |                                            |

## Border Style

Controlling the style of an element's borders.

| Concept    | CSS Rule               | Tailwind v4 Class | `sz` Prop (Object Syntax)   | Note |
| :--------- | :--------------------- | :---------------- | :-------------------------- | :--- |
| **Solid**  | `border-style: solid`  | `border-solid`    | `{ borderStyle: 'solid' }`  |      |
| **Dashed** | `border-style: dashed` | `border-dashed`   | `{ borderStyle: 'dashed' }` |      |
| **Dotted** | `border-style: dotted` | `border-dotted`   | `{ borderStyle: 'dotted' }` |      |
| **Double** | `border-style: double` | `border-double`   | `{ borderStyle: 'double' }` |      |
| **Hidden** | `border-style: hidden` | `border-hidden`   | `{ borderStyle: 'hidden' }` |      |
| **None**   | `border-style: none`   | `border-none`     | `{ borderStyle: 'none' }`   |      |

## Divide Width

Utilities for controlling the border width between elements.

| Concept       | CSS Rule                                                       | Tailwind v4 Class                                      | `sz` Prop (Object Syntax)  | Note                 |
| :------------ | :------------------------------------------------------------- | :----------------------------------------------------- | :------------------------- | :------------------- |
| **X**         | `border-inline-start-width: 0px; border-inline-end-width: 1px` | `divide-x`                                             | `{ divideX: true }`        | Applied to children. |
| **X Scale**   | `border-inline-end-width: 1px`                                 | `divide-x-0`, `divide-x-2`, `divide-x-4`, `divide-x-8` | `{ divideX: 2 }`           |                      |
| **X Reverse** | `--tw-divide-x-reverse: 1`                                     | `divide-x-reverse`                                     | `{ divideXReverse: true }` |                      |
| **Y**         | `border-top-width: 0px; border-bottom-width: 1px`              | `divide-y`                                             | `{ divideY: true }`        |                      |
| **Y Scale**   | `border-bottom-width: 1px`                                     | `divide-y-0`, `divide-y-2`, `divide-y-4`, `divide-y-8` | `{ divideY: 2 }`           |                      |
| **Y Reverse** | `--tw-divide-y-reverse: 1`                                     | `divide-y-reverse`                                     | `{ divideYReverse: true }` |                      |
| **Arbitrary** | `border-inline-end-width: 3px`                                 | `divide-x-[3px]`                                       | `{ divideX: '3px' }`       |                      |
| **Variable**  | `border-inline-end-width: var(--w)`                            | `divide-x-(--w)`                                       | `{ divideX: '--w' }`       |                      |

## Divide Color

Utilities for controlling the border color between elements.

| Concept               | CSS Rule                      | Tailwind v4 Class   | `sz` Prop (Object Syntax)                       | Note                                       |
| :-------------------- | :---------------------------- | :------------------ | :---------------------------------------------- | :----------------------------------------- |
| **Color**             | `border-color: currentColor`  | `divide-red-500`    | `{ divideColor: 'red-500' }`                    |                                            |
| **Opacity**           | `border-color: currentColor`  | `divide-red-500/50` | `{ divideColor: { color: 'red-500', op: 50 } }` |                                            |
| **CSS Var + Opacity** | `border-color: var(--c) / 50` | `divide-(--c)/50`   | `{ divideColor: { color: '--c', op: 50 } }`     | CSS variables are auto-wrapped in `(...)`. |
| **Arbitrary**         | `border-color: currentColor`  | `divide-[#50d71e]`  | `{ divideColor: '#50d71e' }`                    |                                            |
| **Variable**          | `border-color: var(--c)`      | `divide-(--c)`      | `{ divideColor: '--c' }`                        |                                            |

## Divide Style

Utilities for controlling the border style between elements.

| Concept    | CSS Rule               | Tailwind v4 Class | `sz` Prop (Object Syntax)   | Note |
| :--------- | :--------------------- | :---------------- | :-------------------------- | :--- |
| **Solid**  | `border-style: solid`  | `divide-solid`    | `{ divideStyle: 'solid' }`  |      |
| **Dashed** | `border-style: dashed` | `divide-dashed`   | `{ divideStyle: 'dashed' }` |      |
| **Dotted** | `border-style: dotted` | `divide-dotted`   | `{ divideStyle: 'dotted' }` |      |
| **Double** | `border-style: double` | `divide-double`   | `{ divideStyle: 'double' }` |      |
| **None**   | `border-style: none`   | `divide-none`     | `{ divideStyle: 'none' }`   |      |

## Outline Width

Controlling the width of an element's outline.

| Concept       | CSS Rule                  | Tailwind v4 Class                                                          | `sz` Prop (Object Syntax) | Note |
| :------------ | :------------------------ | :------------------------------------------------------------------------- | :------------------------ | :--- |
| **Width**     | `outline-width: 1px`      | `outline`, `outline-0`, `outline-1`, `outline-2`, `outline-4`, `outline-8` | `{ outline: 1 }`          |      |
| **Arbitrary** | `outline-width: 3px`      | `outline-[3px]`                                                            | `{ outline: '3px' }`      |      |
| **Variable**  | `outline-width: var(--w)` | `outline-(--w)`                                                            | `{ outline: '--w' }`      |      |

## Outline Color

Controlling the color of an element's outline.

| Concept       | CSS Rule                      | Tailwind v4 Class   | `sz` Prop (Object Syntax)     | Note |
| :------------ | :---------------------------- | :------------------ | :---------------------------- | :--- |
| **Color**     | `outline-color: currentColor` | `outline-red-500`   | `{ outlineColor: 'red-500' }` |      |
| **Arbitrary** | `outline-color: currentColor` | `outline-[#50d71e]` | `{ outlineColor: '#50d71e' }` |      |
| **Variable**  | `outline-color: var(--c)`     | `outline-(--c)`     | `{ outlineColor: '--c' }`     |      |

## Outline Style

Controlling the style of an element's outline.

| Concept    | CSS Rule                                               | Tailwind v4 Class | `sz` Prop (Object Syntax)    | Note                              |
| :--------- | :----------------------------------------------------- | :---------------- | :--------------------------- | :-------------------------------- |
| **None**   | `outline: 2px solid transparent; outline-offset: 2px;` | `outline-none`    | `{ outline: 'none' }`        | **Reset**: Resets outline styles. |
| **Solid**  | `outline-style: solid`                                 | `outline-solid`   | `{ outlineStyle: 'solid' }`  |                                   |
| **Dashed** | `outline-style: dashed`                                | `outline-dashed`  | `{ outlineStyle: 'dashed' }` |                                   |
| **Dotted** | `outline-style: dotted`                                | `outline-dotted`  | `{ outlineStyle: 'dotted' }` |                                   |
| **Double** | `outline-style: double`                                | `outline-double`  | `{ outlineStyle: 'double' }` |                                   |
| **Hidden** | `outline-style: hidden`                                | `outline-hidden`  | `{ outlineStyle: 'hidden' }` |                                   |

## Outline Offset

Controlling the offset of an element's outline.

| Concept       | CSS Rule                   | Tailwind v4 Class                                                                                  | `sz` Prop (Object Syntax)  | Note |
| :------------ | :------------------------- | :------------------------------------------------------------------------------------------------- | :------------------------- | :--- |
| **Offset**    | `outline-offset: 0px`      | `outline-offset-0`, `outline-offset-1`, `outline-offset-2`, `outline-offset-4`, `outline-offset-8` | `{ outlineOffset: 0 }`     |      |
| **Arbitrary** | `outline-offset: 3px`      | `outline-offset-[3px]`                                                                             | `{ outlineOffset: '3px' }` |      |
| **Variable**  | `outline-offset: var(--o)` | `outline-offset-(--o)`                                                                             | `{ outlineOffset: '--o' }` |      |


# Effects

Controlling effects like shadows, opacity, and blends.

## Box Shadow

Controlling the box shadow of an element.

| Concept                | CSS Rule                                    | Tailwind v4 Class                                                                                                 | `sz` Prop (Object Syntax)                                                                                                                    | Note                                         |
| :--------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- |
| **Shadow**             | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`             | `{ shadow: '2xs' }`, `{ shadow: 'xs' }`, `{ shadow: 'sm' }`, `{ shadow: 'md' }`, `{ shadow: 'lg' }`, `{ shadow: 'xl' }`, `{ shadow: '2xl' }` | **v4.1**: `2xs`, `xs`.                       |
| **Inset Shadow**       | `box-shadow: inset (etc)`                   | `inset-shadow-2xs`, `inset-shadow-xs`, `inset-shadow-sm`, `inset-shadow-md`, `inset-shadow-lg`, `inset-shadow-xl` | `{ insetShadow: '2xs' }`                                                                                                                     | **New in v4**: Distinct from `shadow-inner`. |
| **Ring**               | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `ring`, `ring-1`                                                                                                  | `{ ring: 1 }`                                                                                                                                |                                              |
| **Inset Ring**         | `box-shadow: inset (etc)`                   | `inset-ring`, `inset-ring-1`                                                                                      | `{ insetRing: 1 }`                                                                                                                           |                                              |
| **None**               | `box-shadow: 0 0 #0000`                     | `shadow-none`                                                                                                     | `{ shadow: 'none' }`                                                                                                                         |                                              |
| **Inset None**         | `box-shadow: inset 0 0 #0000`               | `inset-shadow-none`                                                                                               | `{ insetShadow: 'none' }`                                                                                                                    |                                              |
| **Ring None**          | `box-shadow: 0 0 #0000`                     | `ring-none`                                                                                                       | `{ ring: 'none' }`                                                                                                                           |                                              |
| **Color**              | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-blue-500`, `inset-shadow-blue-500`, `ring-blue-500`                                                       | `{ shadowColor: 'blue-500' }`                                                                                                                |                                              |
| **Color + Opacity**    | `--tw-shadow-color: (value) / 50%`          | `shadow-blue-500/50`                                                                                              | `{ shadowColor: { color: 'blue-500', op: 50 } }`                                                                                             |                                              |
| **CSS Var + Opacity**  | `--tw-shadow-color: var(--c) / 50%`         | `shadow-(--c)/50`                                                                                                 | `{ shadowColor: { color: '--c', op: 50 } }`                                                                                                  | CSS variables are auto-wrapped in `(...)`.   |
| **Inset Sh Color**     | `--tw-inset-shadow-color: (value)`          | `inset-shadow-blue-500`                                                                                           | `{ insetShadowColor: 'blue-500' }`                                                                                                           | Separate key for inset shadow color.         |
| **Inset Sh Var**       | `--tw-inset-shadow-color: var(--c)`         | `inset-shadow-(color:--c)`                                                                                        | `{ insetShadowColor: '--c' }`                                                                                                                | CSS variable with `color:` type hint.        |
| **Inset Sh + Opacity** | `--tw-inset-shadow-color: (value) / 30%`    | `inset-shadow-black/30`                                                                                           | `{ insetShadowColor: { color: 'black', op: 30 } }`                                                                                           |                                              |
| **Inset Sh Var + Op**  | `--tw-inset-shadow-color: var(--c) / 30%`   | `inset-shadow-(--c)/30`                                                                                           | `{ insetShadowColor: { color: '--c', op: 30 } }`                                                                                             | CSS variables are auto-wrapped in `(...)`.   |
| **Inherit/Custom**     | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-inherit`, `shadow-current`, `shadow-black`, `shadow-white`, `shadow-transparent`                          | `{ shadowColor: 'inherit' }` etc.                                                                                                            |                                              |
| **Custom Var**         | `--tw-shadow-color: var(--value)`           | `shadow-(color:--my-color)`                                                                                       | `{ shadowColor: '--my-color' }`                                                                                                              | **New in v4**: Sets variable explicitly.     |
| **Arbitrary**          | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]`                                                                      | `{ shadow: '0 35px 60px -15px rgba(0,0,0,0.3)' }`                                                                                            |                                              |
| **Var**                | `box-shadow: var(--s)`                      | `shadow-(--s)`                                                                                                    | `{ shadow: '--s' }`                                                                                                                          | **Sugar**: Auto-detects `--`.                |

## Text Shadow

Controlling the shadow of a text element.

| Concept       | CSS Rule             | Tailwind v4 Class                                                   | `sz` Prop (Object Syntax)                              | Note           |
| :------------ | :------------------- | :------------------------------------------------------------------ | :----------------------------------------------------- | :------------- |
| **Shadow**    | `text-shadow: (etc)` | `text-shadow`, `text-shadow-sm`, `text-shadow-md`, `text-shadow-lg` | `{ textShadow: 'sm' }`                                 | **New in v4**. |
| **None**      | `text-shadow: none`  | `text-shadow-none`                                                  | `{ textShadow: 'none' }`                               |                |
| **Color**     | `text-shadow: (etc)` | `text-shadow-blue-500`                                              | `{ textShadowColor: 'blue-500' }`                      |                |
| **Arbitrary** | `text-shadow: (etc)` | `text-shadow-[2px_2px_4px_var(--tw-shadow-color)]`                  | `{ textShadow: '2px 2px 4px var(--tw-shadow-color)' }` |                |

## Opacity

Controlling the opacity of an element.

| Concept       | CSS Rule            | Tailwind v4 Class                | `sz` Prop (Object Syntax)                                | Note                                |
| :------------ | :------------------ | :------------------------------- | :------------------------------------------------------- | :---------------------------------- |
| **Dynamic**   | `opacity: 0 to 1`   | `opacity-<number>` (any integer) | `{ opacity: 50 }`, `{ opacity: 88 }`, `{ opacity: 999 }` | v4: fully dynamic, no static scale. |
| **Arbitrary** | `opacity: .33`      | `opacity-[.33]`                  | `{ opacity: '.33' }`                                     |                                     |
| **Var**       | `opacity: var(--o)` | `opacity-(--o)`                  | `{ opacity: '--o' }`                                     |                                     |

## Mix Blend Mode

Controlling how an element's content should blend with the background.

| Concept          | CSS Rule                       | Tailwind v4 Class        | `sz` Prop (Object Syntax)      | Note |
| :--------------- | :----------------------------- | :----------------------- | :----------------------------- | :--- |
| **Normal**       | `mix-blend-mode: normal`       | `mix-blend-normal`       | `{ mixBlend: 'normal' }`       |      |
| **Multiply**     | `mix-blend-mode: multiply`     | `mix-blend-multiply`     | `{ mixBlend: 'multiply' }`     |      |
| **Screen**       | `mix-blend-mode: screen`       | `mix-blend-screen`       | `{ mixBlend: 'screen' }`       |      |
| **Overlay**      | `mix-blend-mode: overlay`      | `mix-blend-overlay`      | `{ mixBlend: 'overlay' }`      |      |
| **Darken**       | `mix-blend-mode: darken`       | `mix-blend-darken`       | `{ mixBlend: 'darken' }`       |      |
| **Lighten**      | `mix-blend-mode: lighten`      | `mix-blend-lighten`      | `{ mixBlend: 'lighten' }`      |      |
| **Color Dodge**  | `mix-blend-mode: color-dodge`  | `mix-blend-color-dodge`  | `{ mixBlend: 'color-dodge' }`  |      |
| **Color Burn**   | `mix-blend-mode: color-burn`   | `mix-blend-color-burn`   | `{ mixBlend: 'color-burn' }`   |      |
| **Hard Light**   | `mix-blend-mode: hard-light`   | `mix-blend-hard-light`   | `{ mixBlend: 'hard-light' }`   |      |
| **Soft Light**   | `mix-blend-mode: soft-light`   | `mix-blend-soft-light`   | `{ mixBlend: 'soft-light' }`   |      |
| **Difference**   | `mix-blend-mode: difference`   | `mix-blend-difference`   | `{ mixBlend: 'difference' }`   |      |
| **Exclusion**    | `mix-blend-mode: exclusion`    | `mix-blend-exclusion`    | `{ mixBlend: 'exclusion' }`    |      |
| **Hue**          | `mix-blend-mode: hue`          | `mix-blend-hue`          | `{ mixBlend: 'hue' }`          |      |
| **Saturation**   | `mix-blend-mode: saturation`   | `mix-blend-saturation`   | `{ mixBlend: 'saturation' }`   |      |
| **Color**        | `mix-blend-mode: color`        | `mix-blend-color`        | `{ mixBlend: 'color' }`        |      |
| **Luminosity**   | `mix-blend-mode: luminosity`   | `mix-blend-luminosity`   | `{ mixBlend: 'luminosity' }`   |      |
| **Plus Lighter** | `mix-blend-mode: plus-lighter` | `mix-blend-plus-lighter` | `{ mixBlend: 'plus-lighter' }` |      |
| **Plus Darker**  | `mix-blend-mode: plus-darker`  | `mix-blend-plus-darker`  | `{ mixBlend: 'plus-darker' }`  |      |

## Background Blend Mode

Controlling how an element's background image should blend with its background color.

| Concept   | CSS Rule                       | Tailwind v4 Class                                                                                                                                                                                                                                                                                                                              | `sz` Prop (Object Syntax)      | Note |
| :-------- | :----------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------- | :--- |
| **Modes** | `background-blend-mode: (etc)` | `bg-blend-normal`, `bg-blend-multiply`, `bg-blend-screen`, `bg-blend-overlay`, `bg-blend-darken`, `bg-blend-lighten`, `bg-blend-color-dodge`, `bg-blend-color-burn`, `bg-blend-hard-light`, `bg-blend-soft-light`, `bg-blend-difference`, `bg-blend-exclusion`, `bg-blend-hue`, `bg-blend-saturation`, `bg-blend-color`, `bg-blend-luminosity` | `{ bgBlend: 'multiply' }` etc. |      |

## Masking (v4.1+)

Controlling the masking of an element with images, gradients, and CSS properties.

> **Source:** [Tailwind CSS v4.1 Documentation](https://tailwindcss.com/docs/mask-image)

### mask-image: Gradient Masks

| Concept        | CSS Rule                                      | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                       |
| :------------- | :-------------------------------------------- | :---------------- | :------------------------ | :------------------------- |
| **None**       | `mask-image: none`                            | `mask-none`       | `{ mask: 'none' }`        |                            |
| **Linear**     | `mask-image: linear-gradient(45deg, ...)`     | `mask-linear-45`  | `{ mask: 'linear-45' }`   | Angle in degrees.          |
| **Linear Neg** | `mask-image: linear-gradient(-45deg, ...)`    | `-mask-linear-45` | `{ mask: '-linear-45' }`  | Negative angle prefix `-`. |
| **Radial**     | `mask-image: radial-gradient(...)`            | `mask-radial`     | `{ mask: 'radial' }`      |                            |
| **Conic**      | `mask-image: conic-gradient(from 90deg, ...)` | `mask-conic-90`   | `{ mask: 'conic-90' }`    |                            |

### mask-image: Direction Keywords

| Concept             | CSS Rule                                            | Tailwind v4 Class   | `sz` Prop (Object Syntax)  | Note |
| :------------------ | :-------------------------------------------------- | :------------------ | :------------------------- | :--- |
| **To Top**          | `mask-image: linear-gradient(to top, ...)`          | `mask-linear-to-t`  | `{ mask: 'linear-to-t' }`  |      |
| **To Top Right**    | `mask-image: linear-gradient(to top right, ...)`    | `mask-linear-to-tr` | `{ mask: 'linear-to-tr' }` |      |
| **To Right**        | `mask-image: linear-gradient(to right, ...)`        | `mask-linear-to-r`  | `{ mask: 'linear-to-r' }`  |      |
| **To Bottom Right** | `mask-image: linear-gradient(to bottom right, ...)` | `mask-linear-to-br` | `{ mask: 'linear-to-br' }` |      |
| **To Bottom**       | `mask-image: linear-gradient(to bottom, ...)`       | `mask-linear-to-b`  | `{ mask: 'linear-to-b' }`  |      |
| **To Bottom Left**  | `mask-image: linear-gradient(to bottom left, ...)`  | `mask-linear-to-bl` | `{ mask: 'linear-to-bl' }` |      |
| **To Left**         | `mask-image: linear-gradient(to left, ...)`         | `mask-linear-to-l`  | `{ mask: 'linear-to-l' }`  |      |
| **To Top Left**     | `mask-image: linear-gradient(to top left, ...)`     | `mask-linear-to-tl` | `{ mask: 'linear-to-tl' }` |      |

### mask-image: Shape Modifiers (Radial)

| Concept     | CSS Rule                          | Tailwind v4 Class | `sz` Prop (Object Syntax)  | Note                  |
| :---------- | :-------------------------------- | :---------------- | :------------------------- | :-------------------- |
| **Circle**  | `--tw-mask-radial-shape: circle`  | `mask-circle`     | `{ maskShape: 'circle' }`  | For radial gradients. |
| **Ellipse** | `--tw-mask-radial-shape: ellipse` | `mask-ellipse`    | `{ maskShape: 'ellipse' }` | Default shape.        |

### mask-image: Arbitrary Values

| Concept      | CSS Rule                           | Tailwind v4 Class             | `sz` Prop (Object Syntax)          | Note               |
| :----------- | :--------------------------------- | :---------------------------- | :--------------------------------- | :----------------- |
| **URL**      | `mask-image: url(/img.png)`        | `mask-[url(/img.png)]`        | `{ mask: "url('/img.png')" }`      | Arbitrary syntax.  |
| **Gradient** | `mask-image: linear-gradient(...)` | `mask-[linear-gradient(...)]` | `{ mask: 'linear-gradient(...)' }` | Spaces become `_`. |
| **Variable** | `mask-image: var(--my-mask)`       | `mask-(--my-mask)`            | `{ mask: '--my-mask' }`            | CSS variable.      |

### mask-size

| Concept       | CSS Rule              | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note             |
| :------------ | :-------------------- | :---------------- | :------------------------ | :--------------- |
| **Auto**      | `mask-size: auto`     | `mask-auto`       | `{ maskSize: 'auto' }`    |                  |
| **Cover**     | `mask-size: cover`    | `mask-cover`      | `{ maskSize: 'cover' }`   |                  |
| **Contain**   | `mask-size: contain`  | `mask-contain`    | `{ maskSize: 'contain' }` |                  |
| **Arbitrary** | `mask-size: 50%`      | `mask-size-[50%]` | `{ maskSize: '50%' }`     | Arbitrary value. |
| **Variable**  | `mask-size: var(--s)` | `mask-size-(--s)` | `{ maskSize: '--s' }`     | CSS variable.    |

### mask-position

| Concept          | CSS Rule                         | Tailwind v4 Class                 | `sz` Prop (Object Syntax)        | Note               |
| :--------------- | :------------------------------- | :-------------------------------- | :------------------------------- | :----------------- |
| **Center**       | `mask-position: center`          | `mask-center`                     | `{ maskPos: 'center' }`          |                    |
| **Top**          | `mask-position: top`             | `mask-top`                        | `{ maskPos: 'top' }`             |                    |
| **Bottom**       | `mask-position: bottom`          | `mask-bottom`                     | `{ maskPos: 'bottom' }`          |                    |
| **Left**         | `mask-position: left`            | `mask-left`                       | `{ maskPos: 'left' }`            |                    |
| **Right**        | `mask-position: right`           | `mask-right`                      | `{ maskPos: 'right' }`           |                    |
| **Top Left**     | `mask-position: top left`        | `mask-top-left`                   | `{ maskPos: 'top-left' }`        |                    |
| **Top Right**    | `mask-position: top right`       | `mask-top-right`                  | `{ maskPos: 'top-right' }`       |                    |
| **Bottom Left**  | `mask-position: bottom left`     | `mask-bottom-left`                | `{ maskPos: 'bottom-left' }`     |                    |
| **Bottom Right** | `mask-position: bottom right`    | `mask-bottom-right`               | `{ maskPos: 'bottom-right' }`    |                    |
| **Arbitrary**    | `mask-position: center top 1rem` | `mask-position-[center_top_1rem]` | `{ maskPos: 'center_top_1rem' }` | Spaces become `_`. |

### mask-repeat

| Concept       | CSS Rule                 | Tailwind v4 Class   | `sz` Prop (Object Syntax)     | Note     |
| :------------ | :----------------------- | :------------------ | :---------------------------- | :------- |
| **Repeat**    | `mask-repeat: repeat`    | `mask-repeat`       | `{ maskRepeat: 'repeat' }`    | Default. |
| **No Repeat** | `mask-repeat: no-repeat` | `mask-no-repeat`    | `{ maskRepeat: 'no-repeat' }` |          |
| **Repeat X**  | `mask-repeat: repeat-x`  | `mask-repeat-x`     | `{ maskRepeat: 'repeat-x' }`  |          |
| **Repeat Y**  | `mask-repeat: repeat-y`  | `mask-repeat-y`     | `{ maskRepeat: 'repeat-y' }`  |          |
| **Space**     | `mask-repeat: space`     | `mask-repeat-space` | `{ maskRepeat: 'space' }`     |          |
| **Round**     | `mask-repeat: round`     | `mask-repeat-round` | `{ maskRepeat: 'round' }`     |          |

### mask-origin

| Concept         | CSS Rule                   | Tailwind v4 Class     | `sz` Prop (Object Syntax)   | Note      |
| :-------------- | :------------------------- | :-------------------- | :-------------------------- | :-------- |
| **Border Box**  | `mask-origin: border-box`  | `mask-origin-border`  | `{ maskOrigin: 'border' }`  |           |
| **Padding Box** | `mask-origin: padding-box` | `mask-origin-padding` | `{ maskOrigin: 'padding' }` |           |
| **Content Box** | `mask-origin: content-box` | `mask-origin-content` | `{ maskOrigin: 'content' }` |           |
| **Fill Box**    | `mask-origin: fill-box`    | `mask-origin-fill`    | `{ maskOrigin: 'fill' }`    | SVG only. |
| **Stroke Box**  | `mask-origin: stroke-box`  | `mask-origin-stroke`  | `{ maskOrigin: 'stroke' }`  | SVG only. |
| **View Box**    | `mask-origin: view-box`    | `mask-origin-view`    | `{ maskOrigin: 'view' }`    | SVG only. |

### mask-clip

| Concept         | CSS Rule                 | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note      |
| :-------------- | :----------------------- | :------------------ | :------------------------ | :-------- |
| **Border Box**  | `mask-clip: border-box`  | `mask-clip-border`  | `{ maskClip: 'border' }`  |           |
| **Padding Box** | `mask-clip: padding-box` | `mask-clip-padding` | `{ maskClip: 'padding' }` |           |
| **Content Box** | `mask-clip: content-box` | `mask-clip-content` | `{ maskClip: 'content' }` |           |
| **Fill Box**    | `mask-clip: fill-box`    | `mask-clip-fill`    | `{ maskClip: 'fill' }`    | SVG only. |
| **Stroke Box**  | `mask-clip: stroke-box`  | `mask-clip-stroke`  | `{ maskClip: 'stroke' }`  | SVG only. |
| **View Box**    | `mask-clip: view-box`    | `mask-clip-view`    | `{ maskClip: 'view' }`    | SVG only. |
| **No Clip**     | `mask-clip: no-clip`     | `mask-no-clip`      | `{ maskClip: 'no-clip' }` |           |

### mask-mode

Controls how element masks are interpreted.

| Concept          | CSS Rule                  | Tailwind v4 Class | `sz` Prop (Object Syntax)      | Note                |
| :--------------- | :------------------------ | :---------------- | :----------------------------- | :------------------ |
| **Alpha**        | `mask-mode: alpha`        | `mask-alpha`      | `{ maskMode: 'alpha' }`        | Uses alpha channel. |
| **Luminance**    | `mask-mode: luminance`    | `mask-luminance`  | `{ maskMode: 'luminance' }`    | Uses luminance.     |
| **Match Source** | `mask-mode: match-source` | `mask-match`      | `{ maskMode: 'match-source' }` | Auto-detect.        |

### mask-type

Controls how SVG masks are interpreted. **Note:** Uses `mask-type-` prefix (different from `mask-mode`).

| Concept       | CSS Rule               | Tailwind v4 Class     | `sz` Prop (Object Syntax)   | Note              |
| :------------ | :--------------------- | :-------------------- | :-------------------------- | :---------------- |
| **Alpha**     | `mask-type: alpha`     | `mask-type-alpha`     | `{ maskType: 'alpha' }`     | For SVG `<mask>`. |
| **Luminance** | `mask-type: luminance` | `mask-type-luminance` | `{ maskType: 'luminance' }` | For SVG `<mask>`. |

### mask-composite

Controls how multiple masks are combined.

| Concept       | CSS Rule                    | Tailwind v4 Class | `sz` Prop (Object Syntax)        | Note            |
| :------------ | :-------------------------- | :---------------- | :------------------------------- | :-------------- |
| **Add**       | `mask-composite: add`       | `mask-add`        | `{ maskComposite: 'add' }`       | Union of masks. |
| **Subtract**  | `mask-composite: subtract`  | `mask-subtract`   | `{ maskComposite: 'subtract' }`  | Difference.     |
| **Intersect** | `mask-composite: intersect` | `mask-intersect`  | `{ maskComposite: 'intersect' }` | Intersection.   |
| **Exclude**   | `mask-composite: exclude`   | `mask-exclude`    | `{ maskComposite: 'exclude' }`   | XOR.            |

### Compiler Mappings

```typescript
// mask-mode: direct mapping (no prefix)
{
  maskMode: "alpha";
} // → mask-alpha
{
  maskMode: "luminance";
} // → mask-luminance
{
  maskMode: "match-source";
} // → mask-match

// mask-type: uses mask-type- prefix
{
  maskType: "alpha";
} // → mask-type-alpha
{
  maskType: "luminance";
} // → mask-type-luminance

// mask-composite: direct mapping (no prefix)
{
  maskComposite: "add";
} // → mask-add
{
  maskComposite: "subtract";
} // → mask-subtract

// mask-size: direct mapping
{
  maskSize: "cover";
} // → mask-cover
{
  maskSize: "contain";
} // → mask-contain
{
  maskSize: "auto";
} // → mask-auto

// mask-position: mask- prefix
{
  maskPos: "center";
} // → mask-center
{
  maskPos: "top-left";
} // → mask-top-left

// mask-repeat: special handling
{
  maskRepeat: "repeat";
} // → mask-repeat (not mask-repeat-repeat)
{
  maskRepeat: "no-repeat";
} // → mask-no-repeat
{
  maskRepeat: "repeat-x";
} // → mask-repeat-x

// mask-origin/clip: uses -origin-/-clip- infix
{
  maskOrigin: "border";
} // → mask-origin-border
{
  maskClip: "content";
} // → mask-clip-content

// mask-image: arbitrary values are auto-wrapped by compiler — no brackets needed in sz
{
  mask: "linear-gradient(...)";
} // → mask-[linear-gradient(...)]
{
  mask: "url(/img.png)";
} // → mask-[url(/img.png)]
```

### Key Differences

| Property         | Format                                | Example                        |
| ---------------- | ------------------------------------- | ------------------------------ |
| `mask-mode`      | `mask-{value}`                        | `mask-alpha`                   |
| `mask-type`      | `mask-type-{value}`                   | `mask-type-alpha`              |
| `mask-composite` | `mask-{value}`                        | `mask-add`                     |
| `mask-size`      | `mask-{value}`                        | `mask-cover`                   |
| `mask-position`  | `mask-{value}`                        | `mask-center`                  |
| `mask-repeat`    | `mask-{value}` / `mask-repeat-{x\|y}` | `mask-repeat`, `mask-repeat-x` |
| `mask-origin`    | `mask-origin-{value}`                 | `mask-origin-border`           |
| `mask-clip`      | `mask-clip-{value}`                   | `mask-clip-content`            |

### Mask Gradient Color Stops (v4.1)

Control the color stops used in mask gradient functions.

| Concept      | CSS Rule              | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note |
| :----------- | :-------------------- | :------------------ | :------------------------ | :--- |
| **From**     | mask gradient start   | `mask-from-<color>` | `{ maskFrom: '<color>' }` |      |
| **Via**      | mask gradient middle  | `mask-via-<color>`  | `{ maskVia: '<color>' }`  |      |
| **To**       | mask gradient end     | `mask-to-<color>`   | `{ maskTo: '<color>' }`   |      |
| **Variable** | `mask-from: var(--c)` | `mask-from-(--c)`   | `{ maskFrom: '--c' }`     |      |


# Filters

Applying graphical effects like blur or color shifts.

## Filter

Utilities for controlling the overall filter property.

| Concept           | CSS Rule                 | Tailwind v4 Class      | `sz` Prop (Object Syntax)    | Note                               |
| :---------------- | :----------------------- | :--------------------- | :--------------------------- | :--------------------------------- |
| **Filter None**   | `filter: none;`          | `filter-none`          | `{ filter: 'none' }`         |                                    |
| **Filter Var**    | `filter: var(--c);`      | `filter-(--c)`         | `{ filter: '--c' }`          |                                    |
| **Filter Arb**    | `filter: blur(5px);`     | `filter-[blur(5px)]`   | `{ filter: 'blur(5px)' }`    |                                    |
| **Backdrop None** | `backdrop-filter: none;` | `backdrop-filter-none` | `{ backdropFilter: 'none' }` |                                    |
| **Defaults**      | `filter: blur(8px)`      | `blur`                 | `{ blur: true }`             | **Boolean**: Sets default effects. |

| Filter Item               | CSS Rule                                              | Tailwind v4 Class                                                            | `sz` Prop (Object Syntax)                                    | Note                          |
| :------------------------ | :---------------------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------- | :---------------------------- |
| **Blur Scale**            | `filter: blur(var(--blur-xs))` to `3xl`               | `blur-xs` to `blur-3xl`                                                      | `{ blur: 'xs' }` to `{ blur: '3xl' }`                        |                               |
| **Blur None**             | `filter: blur(0);`                                    | `blur-none`                                                                  | `{ blur: 'none' }`                                           |                               |
| **Blur Var**              | `filter: blur(var(--c))`                              | `blur-(--c)`                                                                 | `{ blur: '--c' }`                                            |                               |
| **Blur Arb**              | `filter: var(--c)`                                    | `blur-[4px]`                                                                 | `{ blur: '4px' }`                                            |                               |
| **Brightness**            | `filter: brightness(0%)` to `200%`                    | `brightness-0` to `brightness-200`                                           | `{ brightness: 0 }` to `{ brightness: 200 }`                 |                               |
| **Brightness Var**        | `filter: brightness(var(--c))`                        | `brightness-(--c)`                                                           | `{ brightness: '--c' }`                                      |                               |
| **Brightness Arb**        | `filter: brightness(1.25)`                            | `brightness-[1.25]`                                                          | `{ brightness: '1.25' }`                                     |                               |
| **Contrast**              | `filter: contrast(0%)` to `200%`                      | `contrast-0` to `contrast-200`                                               | `{ contrast: 0 }` to `{ contrast: 200 }`                     |                               |
| **Contrast Var**          | `filter: contrast(var(--c))`                          | `contrast-(--c)`                                                             | `{ contrast: '--c' }`                                        |                               |
| **Contrast Arb**          | `filter: contrast(1.5)`                               | `contrast-[1.5]`                                                             | `{ contrast: '1.5' }`                                        |                               |
| **Drop Shadow**           | `filter: drop-shadow(var(--drop-shadow-xs))` to `2xl` | `drop-shadow-xs` to `drop-shadow-2xl`                                        | `{ dropShadow: 'xs' }` to `{ dropShadow: '2xl' }`            |                               |
| **Drop Shadow None**      | `filter: drop-shadow(0 0 #0000)`                      | `drop-shadow-none`                                                           | `{ dropShadow: 'none' }`                                     |                               |
| **Drop Shadow Var**       | `filter: drop-shadow(var(--c))`                       | `drop-shadow-(--c)`                                                          | `{ dropShadow: '--c' }`                                      |                               |
| **Drop Shadow Arb**       | `filter: drop-shadow(0 25px 25px rgb(0 0 0/0.15))`    | `drop-shadow-[0_25px_25px_rgb(0_0_0/0.15)]`                                  | `{ dropShadow: '0 25px 25px rgb(0 0 0/0.15)' }`              | Spaces auto-encoded to `_`.   |
| **Drop Shadow + Variant** | (hover state)                                         | `hover:drop-shadow-[0_0_15px_rgba(45,213,151,0.5)]`                          | `{ hover: { dropShadow: '0 0 15px rgba(45,213,151,0.5)' } }` | Works in any variant context. |
| **Drop Shadow Color**     | `--tw-drop-shadow-color: (etc)`                       | `drop-shadow-slate-500`, `drop-shadow-red-500`, `drop-shadow-blue-500`, etc. | `{ dropShadowColor: 'red-500' }`                             | Full palette support.         |
| **Drop Shadow Var Col**   | `--tw-drop-shadow-color: var(--c)`                    | `drop-shadow-(color:--c)`                                                    | `{ dropShadowColor: '--c' }`                                 | **New in v4**.                |
| **Grayscale**             | `filter: grayscale(100%)`                             | `grayscale`                                                                  | `{ grayscale: true }`                                        |                               |
| **Grayscale Scale**       | `filter: grayscale(0%)` to `100%`                     | `grayscale-0` to `grayscale-100`                                             | `{ grayscale: 0 }` to `{ grayscale: 100 }`                   |                               |
| **Grayscale Var**         | `filter: grayscale(var(--c))`                         | `grayscale-(--c)`                                                            | `{ grayscale: '--c' }`                                       |                               |
| **Grayscale Arb**         | `filter: grayscale(50%)`                              | `grayscale-[50%]`                                                            | `{ grayscale: '50%' }`                                       |                               |
| **Hue Rotate**            | `filter: hue-rotate(0deg)` to `180deg`                | `hue-rotate-0` to `hue-rotate-180`                                           | `{ hueRotate: 0 }` to `{ hueRotate: 180 }`                   |                               |
| **Hue Rotate Neg**        | `filter: hue-rotate(calc(ndeg * -1))`                 | `-hue-rotate-15`                                                             | `{ hueRotate: -15 }`                                         |                               |
| **Hue Rotate Var**        | `filter: hue-rotate(var(--c))`                        | `hue-rotate-(--c)`                                                           | `{ hueRotate: '--c' }`                                       |                               |
| **Hue Rotate Arb**        | `filter: hue-rotate(90deg)`                           | `hue-rotate-[90deg]`                                                         | `{ hueRotate: '90deg' }`                                     |                               |
| **Invert**                | `filter: invert(100%)`                                | `invert`                                                                     | `{ invert: true }`                                           |                               |
| **Invert Scale**          | `filter: invert(0%)` to `100%`                        | `invert-0` to `invert-100`                                                   | `{ invert: 0 }` to `{ invert: 100 }`                         |                               |
| **Invert Var**            | `filter: invert(var(--c))`                            | `invert-(--c)`                                                               | `{ invert: '--c' }`                                          |                               |
| **Invert Arb**            | `filter: invert(25%)`                                 | `invert-[25%]`                                                               | `{ invert: '25%' }`                                          |                               |
| **Saturate**              | `filter: saturate(0%)` to `200%`                      | `saturate-0` to `saturate-200`                                               | `{ saturate: 0 }` to `{ saturate: 200 }`                     |                               |
| **Saturate Var**          | `filter: saturate(var(--c))`                          | `saturate-(--c)`                                                             | `{ saturate: '--c' }`                                        |                               |
| **Saturate Arb**          | `filter: saturate(1.5)`                               | `saturate-[1.5]`                                                             | `{ saturate: '1.5' }`                                        |                               |
| **Sepia**                 | `filter: sepia(100%)`                                 | `sepia`                                                                      | `{ sepia: true }`                                            |                               |
| **Sepia Scale**           | `filter: sepia(0%)` to `100%`                         | `sepia-0` to `sepia-100`                                                     | `{ sepia: 0 }` to `{ sepia: 100 }`                           |                               |
| **Sepia Var**             | `filter: sepia(var(--c))`                             | `sepia-(--c)`                                                                | `{ sepia: '--c' }`                                           |                               |
| **Sepia Arb**             | `filter: sepia(50%)`                                  | `sepia-[50%]`                                                                | `{ sepia: '50%' }`                                           |                               |

## Backdrop Filter

Utilities for controlling the backdrop-filter property.

| Concept       | CSS Rule                      | Tailwind v4 Class             | `sz` Prop (Object Syntax)         | Note |
| :------------ | :---------------------------- | :---------------------------- | :-------------------------------- | :--- |
| **None**      | `backdrop-filter: none;`      | `backdrop-filter-none`        | `{ backdropFilter: 'none' }`      |      |
| **Variable**  | `backdrop-filter: var(--c);`  | `backdrop-filter-(--c)`       | `{ backdropFilter: '--c' }`       |      |
| **Arbitrary** | `backdrop-filter: blur(5px);` | `backdrop-filter-[blur(5px)]` | `{ backdropFilter: 'blur(5px)' }` |      |

| Filter Item         | CSS Rule                                        | Tailwind v4 Class                | `sz` Prop (Object Syntax)            | Note |
| :------------------ | :---------------------------------------------- | :------------------------------- | :----------------------------------- | :--- |
| **Blur Scale**      | `backdrop-filter: blur(var(--b))`               | `backdrop-blur-xs` to `3xl`      | `{ backdropBlur: 'xs' }` to `3xl`    |      |
| **Blur None**       | `backdrop-filter: blur(0);`                     | `backdrop-blur-none`             | `{ backdropBlur: 'none' }`           |      |
| **Blur Var**        | `backdrop-filter: blur(var(--c))`               | `backdrop-blur-(--c)`            | `{ backdropBlur: '--c' }`            |      |
| **Blur Arb**        | `backdrop-filter: var(--c)`                     | `backdrop-blur-[4px]`            | `{ backdropBlur: '4px' }`            |      |
| **Brightness**      | `backdrop-filter: brightness(0%)` to `200%`     | `backdrop-brightness-0` to `200` | `{ backdropBrightness: 0 }` to `200` |      |
| **Brightness Var**  | `backdrop-filter: var(--c)`                     | `backdrop-brightness-(--c)`      | `{ backdropBrightness: '--c' }`      |      |
| **Brightness Arb**  | `backdrop-filter: brightness(1.25)`             | `backdrop-brightness-[1.25]`     | `{ backdropBrightness: '1.25' }`     |      |
| **Contrast**        | `backdrop-filter: contrast(0%)` to `200%`       | `backdrop-contrast-0` to `200`   | `{ backdropContrast: 0 }` to `200`   |      |
| **Contrast Var**    | `backdrop-filter: var(--c)`                     | `backdrop-contrast-(--c)`        | `{ backdropContrast: '--c' }`        |      |
| **Contrast Arb**    | `backdrop-filter: contrast(1.5)`                | `backdrop-contrast-[1.5]`        | `{ backdropContrast: '1.5' }`        |      |
| **Grayscale**       | `backdrop-filter: grayscale(100%)`              | `backdrop-grayscale`             | `{ backdropGrayscale: true }`        |      |
| **Grayscale Scale** | `backdrop-filter: grayscale(0%)` to `100%`      | `backdrop-grayscale-0` to `100`  | `{ backdropGrayscale: 0 }` to `100`  |      |
| **Grayscale Var**   | `backdrop-filter: var(--c)`                     | `backdrop-grayscale-(--c)`       | `{ backdropGrayscale: '--c' }`       |      |
| **Grayscale Arb**   | `backdrop-filter: grayscale(50%)`               | `backdrop-grayscale-[50%]`       | `{ backdropGrayscale: '50%' }`       |      |
| **Hue Rotate**      | `backdrop-filter: hue-rotate(0deg)` to `180deg` | `backdrop-hue-rotate-0` to `180` | `{ backdropHueRotate: 0 }` to `180`  |      |
| **Hue Rotate Neg**  | `backdrop-filter: var(--c)`                     | `-backdrop-hue-rotate-15`        | `{ backdropHueRotate: -15 }`         |      |
| **Hue Rotate Var**  | `backdrop-filter: var(--c)`                     | `backdrop-hue-rotate-(--c)`      | `{ backdropHueRotate: '--c' }`       |      |
| **Hue Rotate Arb**  | `backdrop-filter: hue-rotate(90deg)`            | `backdrop-hue-rotate-[90deg]`    | `{ backdropHueRotate: '90deg' }`     |      |
| **Invert**          | `backdrop-filter: invert(100%)`                 | `backdrop-invert`                | `{ backdropInvert: true }`           |      |
| **Invert Scale**    | `backdrop-filter: invert(0%)` to `100%`         | `backdrop-invert-0` to `100`     | `{ backdropInvert: 0 }` to `100`     |      |
| **Invert Var**      | `backdrop-filter: var(--c)`                     | `backdrop-invert-(--c)`          | `{ backdropInvert: '--c' }`          |      |
| **Invert Arb**      | `backdrop-filter: invert(25%)`                  | `backdrop-invert-[25%]`          | `{ backdropInvert: '25%' }`          |      |
| **Opacity**         | `backdrop-filter: opacity(0%)` to `100%`        | `backdrop-opacity-0` to `100`    | `{ backdropOpacity: 0 }` to `100`    |      |
| **Opacity Var**     | `backdrop-filter: var(--c)`                     | `backdrop-opacity-(--c)`         | `{ backdropOpacity: '--c' }`         |      |
| **Opacity Arb**     | `backdrop-filter: opacity(75%)`                 | `backdrop-opacity-[75%]`         | `{ backdropOpacity: '75%' }`         |      |
| **Saturate**        | `backdrop-filter: saturate(0%)` to `200%`       | `backdrop-saturate-0` to `200`   | `{ backdropSaturate: 0 }` to `200`   |      |
| **Saturate Var**    | `backdrop-filter: var(--c)`                     | `backdrop-saturate-(--c)`        | `{ backdropSaturate: '--c' }`        |      |
| **Saturate Arb**    | `backdrop-filter: saturate(1.5)`                | `backdrop-saturate-[1.5]`        | `{ backdropSaturate: '1.5' }`        |      |
| **Sepia**           | `backdrop-filter: sepia(100%)`                  | `backdrop-sepia`                 | `{ backdropSepia: true }`            |      |
| **Sepia Scale**     | `backdrop-filter: sepia(0%)` to `100%`          | `backdrop-sepia-0` to `100`      | `{ backdropSepia: 0 }` to `100`      |      |
| **Sepia Var**       | `backdrop-filter: var(--c)`                     | `backdrop-sepia-(--c)`           | `{ backdropSepia: '--c' }`           |      |
| **Sepia Arb**       | `backdrop-filter: sepia(50%)`                   | `backdrop-sepia-[50%]`           | `{ backdropSepia: '50%' }`           |      |


# Flexbox & Grid

Controlling flex and grid layouts.

## Flex Basis

Controlling initial size of flex items.

| Concept             | CSS Rule                                       | Tailwind v4 Class              | `sz` Prop (Object Syntax) | Note                                                                             |
| :------------------ | :--------------------------------------------- | :----------------------------- | :------------------------ | :------------------------------------------------------------------------------- |
| **Auto**            | `flex-basis: auto`                             | `basis-auto`                   | `{ basis: 'auto' }`       |                                                                                  |
| **Full**            | `flex-basis: 100%`                             | `basis-full`                   | `{ basis: 'full' }`       |                                                                                  |
| **Spacing Scale**   | `flex-basis: calc(var(--spacing) * <number>);` | `basis-<number>` (any integer) | `{ basis: <number> }`     | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Fraction**        | `flex-basis: calc(<fraction> * 100%)`          | `basis-<fraction>`             | `{ basis: '<fraction>' }` | v4: accept any integer/integer fraction (string) bare.                           |
| **Container (3XS)** | `flex-basis: 16rem`                            | `basis-3xs`                    | `{ basis: '3xs' }`        |                                                                                  |
| **Container (2XS)** | `flex-basis: 18rem`                            | `basis-2xs`                    | `{ basis: '2xs' }`        |                                                                                  |
| **Container (XS)**  | `flex-basis: 20rem`                            | `basis-xs`                     | `{ basis: 'xs' }`         |                                                                                  |
| **Container (SM)**  | `flex-basis: 24rem`                            | `basis-sm`                     | `{ basis: 'sm' }`         |                                                                                  |
| **Container (MD)**  | `flex-basis: 28rem`                            | `basis-md`                     | `{ basis: 'md' }`         |                                                                                  |
| **Container (LG)**  | `flex-basis: 32rem`                            | `basis-lg`                     | `{ basis: 'lg' }`         |                                                                                  |
| **Container (XL)**  | `flex-basis: 36rem`                            | `basis-xl`                     | `{ basis: 'xl' }`         |                                                                                  |
| **Container (2XL)** | `flex-basis: 42rem`                            | `basis-2xl`                    | `{ basis: '2xl' }`        |                                                                                  |
| **Container (3XL)** | `flex-basis: 48rem`                            | `basis-3xl`                    | `{ basis: '3xl' }`        |                                                                                  |
| **Container (4XL)** | `flex-basis: 56rem`                            | `basis-4xl`                    | `{ basis: '4xl' }`        |                                                                                  |
| **Container (5XL)** | `flex-basis: 64rem`                            | `basis-5xl`                    | `{ basis: '5xl' }`        |                                                                                  |
| **Container (6XL)** | `flex-basis: 72rem`                            | `basis-6xl`                    | `{ basis: '6xl' }`        |                                                                                  |
| **Container (7XL)** | `flex-basis: 80rem`                            | `basis-7xl`                    | `{ basis: '7xl' }`        |                                                                                  |
| **Zero**            | `flex-basis: 0px`                              | `basis-0`                      | `{ basis: 0 }`            |                                                                                  |
| **Px**              | `flex-basis: 1px`                              | `basis-px`                     | `{ basis: 'px' }`         |                                                                                  |
| **Arbitrary**       | `flex-basis: 14.28%`                           | `basis-[14.28%]`               | `{ basis: '14.28%' }`     |                                                                                  |
| **Arbitrary**       | `flex-basis: 2.5/4`                            | `basis-[2.5/4]`                | `{ basis: '2.5/4' }`      |                                                                                  |
| **CSS Variable**    | `flex-basis: var(--basis)`                     | `basis-(--basis)`              | `{ basis: '--basis' }`    | **Sugar**: Auto-detects `--`.                                                    |

## Flex Direction

Controlling direction of flex items.

| Concept            | CSS Rule                         | Tailwind v4 Class  | `sz` Prop (Canonical)        |
| :----------------- | :------------------------------- | :----------------- | :--------------------------- |
| **Row**            | `flex-direction: row`            | `flex-row`         | `{ flexDir: 'row' }`         |
| **Row Reverse**    | `flex-direction: row-reverse`    | `flex-row-reverse` | `{ flexDir: 'row-reverse' }` |
| **Column**         | `flex-direction: column`         | `flex-col`         | `{ flexDir: 'col' }`         |
| **Column Reverse** | `flex-direction: column-reverse` | `flex-col-reverse` | `{ flexDir: 'col-reverse' }` |

## Flex Wrap

Controlling wrapping of flex items.

| Concept          | CSS Rule                  | Tailwind v4 Class   | `sz` Prop (Canonical)          |
| :--------------- | :------------------------ | :------------------ | :----------------------------- |
| **Wrap**         | `flex-wrap: wrap`         | `flex-wrap`         | `{ flexWrap: 'wrap' }`         |
| **Wrap Reverse** | `flex-wrap: wrap-reverse` | `flex-wrap-reverse` | `{ flexWrap: 'wrap-reverse' }` |
| **No Wrap**      | `flex-wrap: nowrap`       | `flex-nowrap`       | `{ flexWrap: 'nowrap' }`       |

## Flex Grow

Controlling flex item growth.

| Concept          | CSS Rule                      | Tailwind v4 Class         | `sz` Prop (Canonical)          | Note                                                        |
| :--------------- | :---------------------------- | :------------------------ | :----------------------------- | :---------------------------------------------------------- |
| **Grow**         | `flex-grow: 1`                | `grow`                    | `{ grow: true }`               |                                                             |
| **Grow 0**       | `flex-grow: <number>`         | `grow-<number>`           | `{ grow: <number> }`           | v4: fully dynamic, no static scale, accept any integer bare |
| **Arbitrary**    | `flex-grow: 2.5`              | `grow-[2.5]`              | `{ grow: 2.5 }`                | decimal                                                     |
| **Arbitrary**    | `flex-grow: calc(1rem + 2px)` | `grow-[calc(1rem_+_2px)]` | `{ grow: 'calc(1rem + 2px)' }` | string                                                      |
| **CSS Variable** | `flex-grow: var(--grow)`      | `grow-(--grow)`           | `{ grow: '--grow' }`           | **Sugar**: Auto-detects `--`.                               |

## Flex Shrink

Controlling flex item shrinking.

| Concept          | CSS Rule                        | Tailwind v4 Class           | `sz` Prop (Canonical)            | Note                                                        |
| :--------------- | :------------------------------ | :-------------------------- | :------------------------------- | :---------------------------------------------------------- |
| **Shrink**       | `flex-shrink: 1`                | `shrink`                    | `{ shrink: true }`               |                                                             |
| **Shrink 0**     | `flex-shrink: <number>`         | `shrink-<number>`           | `{ shrink: <number> }`           | v4: fully dynamic, no static scale, accept any integer bare |
| **Arbitrary**    | `flex-shrink: 2.5`              | `shrink-[2.5]`              | `{ shrink: 2.5 }`                | decimal                                                     |
| **Arbitrary**    | `flex-shrink: calc(1rem + 2px)` | `shrink-[calc(1rem_+_2px)]` | `{ shrink: 'calc(1rem + 2px)' }` | string                                                      |
| **CSS Variable** | `flex-shrink: var(--shrink)`    | `shrink-(--shrink)`         | `{ shrink: '--shrink' }`         | **Sugar**: Auto-detects `--`.                               |

## Flex

Controlling flex item resizing behaviour.

| Concept          | CSS Rule                        | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                        |
| :--------------- | :------------------------------ | :---------------- | :------------------------ | :---------------------------------------------------------- |
| **1**            | `flex: <number> 1 0%`           | `flex-<number>`   | `{ flex: <number> }`      | v4: fully dynamic, no static scale, accept any integer bare |
| **Fraction**     | `flex: calc(<fraction> * 100%)` | `flex-<fraction>` | `{ flex: '<fraction>' }`  | v4: accept any integer/integer fraction (string) bare.      |
| **Auto**         | `flex: auto`                    | `flex-auto`       | `{ flex: 'auto' }`        |                                                             |
| **Initial**      | `flex: 0 auto`                  | `flex-initial`    | `{ flex: 'initial' }`     |                                                             |
| **None**         | `flex: none`                    | `flex-none`       | `{ flex: 'none' }`        |                                                             |
| **Arbitrary**    | `flex: 3.5`                     | `flex-[3.5]`      | `{ flex: 3.5 }`           | decimal                                                     |
| **Arbitrary**    | `flex: 3.5/4` (not working)     | `flex-[3.5/4]`    | `{ flex: '3.5/4' }`       | not integer/integer fraction                                |
| **Arbitrary**    | `flex: 2 2 0%`                  | `flex-[2_2_0%]`   | `{ flex: '2 2 0%' }`      |                                                             |
| **CSS Variable** | `flex: var(--flex)`             | `flex-(--flex)`   | `{ flex: '--flex' }`      | **Sugar**: Auto-detects `--`.                               |

## Order

Controlling flex/grid item order.

| Concept          | CSS Rule              | Tailwind v4 Class     | `sz` Prop (Object Syntax)  | Note                                                        |
| :--------------- | :-------------------- | :-------------------- | :------------------------- | :---------------------------------------------------------- |
| **1-12**         | `order: <number>`     | `order-<number>`      | `{ order: <number> }`      | v4: fully dynamic, no static scale, accept any integer bare |
| **First**        | `order: -9999`        | `order-first`         | `{ order: 'first' }`       |                                                             |
| **Last**         | `order: 9999`         | `order-last`          | `{ order: 'last' }`        |                                                             |
| **None**         | `order: 0`            | `order-none`          | `{ order: 'none' }`        |                                                             |
| **Negative**     | `order: -<number>`    | `-order-<number>`     | `{ order: -<number> }`     |                                                             |
| **Arbitrary**    | `order: calc(100/5)`  | `order-[calc(100/5)]` | `{ order: 'calc(100/5)' }` |                                                             |
| **CSS Variable** | `order: var(--order)` | `order-(--order)`     | `{ order: '--order' }`     | **Sugar**: Auto-detects `--`.                               |

## Grid Template Columns

Specifying the columns in a grid layout.

| Concept          | CSS Rule                                                  | Tailwind v4 Class         | `sz` Prop (Canonical)         | `sz` Prop (Alias) | Note                                                        |
| :--------------- | :-------------------------------------------------------- | :------------------------ | :---------------------------- | :---------------- | :---------------------------------------------------------- |
| **1-12**         | `grid-template-columns: repeat(<number>, minmax(0, 1fr))` | `grid-cols-<number>`      | `{ gridCols: <number> }`      |                   | v4: fully dynamic, no static scale, accept any integer bare |
| **None**         | `grid-template-columns: none`                             | `grid-cols-none`          | `{ gridCols: 'none' }`        |                   |                                                             |
| **Subgrid**      | `grid-template-columns: subgrid`                          | `grid-cols-subgrid`       | `{ gridCols: 'subgrid' }`     |                   |                                                             |
| **Arbitrary**    | `grid-template-columns: 200px`                            | `grid-cols-[200px]`       | `{ gridCols: '200px' }`       |                   |                                                             |
| **CSS Variable** | `grid-template-columns: var(--grid-cols)`                 | `grid-cols-(--grid-cols)` | `{ gridCols: '--grid-cols' }` |                   | **Sugar**: Auto-detects `--`.                               |

## Grid Template Rows

Specifying the rows in a grid layout.

| Concept          | CSS Rule                                               | Tailwind v4 Class         | `sz` Prop (Canonical)         | `sz` Prop (Alias) | Note                                                        |
| :--------------- | :----------------------------------------------------- | :------------------------ | :---------------------------- | :---------------- | :---------------------------------------------------------- |
| **1-12**         | `grid-template-rows: repeat(<number>, minmax(0, 1fr))` | `grid-rows-<number>`      | `{ gridRows: <number> }`      |                   | v4: fully dynamic, no static scale, accept any integer bare |
| **None**         | `grid-template-rows: none`                             | `grid-rows-none`          | `{ gridRows: 'none' }`        |                   |                                                             |
| **Subgrid**      | `grid-template-rows: subgrid`                          | `grid-rows-subgrid`       | `{ gridRows: 'subgrid' }`     |                   |                                                             |
| **Arbitrary**    | `grid-template-rows: 200px`                            | `grid-rows-[200px]`       | `{ gridRows: '200px' }`       |                   |                                                             |
| **CSS Variable** | `grid-template-rows: var(--grid-rows)`                 | `grid-rows-(--grid-rows)` | `{ gridRows: '--grid-rows' }` |                   | **Sugar**: Auto-detects `--`.                               |

## Grid Column (Start/End/Span)

Controlling column sizing and placement.

| Concept                | CSS Rule                                                   | Tailwind v4 Class         | `sz` Prop (Canonical)         | Note                                                        |
| :--------------------- | :--------------------------------------------------------- | :------------------------ | :---------------------------- | :---------------------------------------------------------- |
| **Auto**               | `grid-column: auto`                                        | `col-auto`                | `{ col: 'auto' }`             |                                                             |
| **Span**               | `grid-column: span <number> / span <number>`               | `col-span-<number>`       | `{ colSpan: <number> }`       | v4: fully dynamic, no static scale, accept any integer bare |
| **Span Full**          | `grid-column: 1 / -1`                                      | `col-span-full`           | `{ colSpan: 'full' }`         |                                                             |
| **Span Arbitrary**     | `grid-column: span 50px / span 50px`                       | `col-span-[50px]`         | `{ colSpan: '50px' }`         |                                                             |
| **Span CSS Variable**  | `grid-column: span var(--col-span) / span var(--col-span)` | `col-span-(--col-span)`   | `{ colSpan: '--col-span' }`   | **Sugar**: Auto-detects `--`.                               |
| **Start**              | `grid-column-start: <number>`                              | `col-start-<number>`      | `{ colStart: <number> }`      | v4: fully dynamic, no static scale, accept any integer bare |
| **Start Negative**     | `grid-column-start: calc(<number> * -1)`                   | `-col-start-<number>`     | `{ colStart: -<number> }`     |                                                             |
| **Start Auto**         | `grid-column-start: auto`                                  | `col-start-auto`          | `{ colStart: 'auto' }`        |                                                             |
| **Start Arbitrary**    | `grid-column-start: calc(100/5)`                           | `col-start-[calc(100/5)]` | `{ colStart: 'calc(100/5)' }` |                                                             |
| **Start CSS Variable** | `grid-column-start: var(--col-start)`                      | `col-start-(--col-start)` | `{ colStart: '--col-start' }` | **Sugar**: Auto-detects `--`.                               |
| **End**                | `grid-column-end: <number>`                                | `col-end-<number>`        | `{ colEnd: <number> }`        | v4: fully dynamic, no static scale, accept any integer bare |
| **End Negative**       | `grid-column-end: calc(<number> * -1)`                     | `-col-end-<number>`       | `{ colEnd: -<number> }`       |                                                             |
| **End Auto**           | `grid-column-end: auto`                                    | `col-end-auto`            | `{ colEnd: 'auto' }`          |                                                             |
| **End Arbitrary**      | `grid-column-end: calc(100/5)`                             | `col-end-[calc(100/5)]`   | `{ colEnd: 'calc(100/5)' }`   |                                                             |
| **End CSS Variable**   | `grid-column-end: var(--col-end)`                          | `col-end-(--col-end)`     | `{ colEnd: '--col-end' }`     | **Sugar**: Auto-detects `--`.                               |
| **Short**              | `grid-column: <number>`                                    | `col-<number>`            | `{ col: <number> }`           | v4: fully dynamic, no static scale, accept any integer bare |
| **Short Negative**     | `grid-column: calc(<number> * -1)`                         | `-col-<number>`           | `{ col: -<number> }`          |                                                             |
| **Short Arbitrary**    | `grid-column: calc(100/5)`                                 | `col-[calc(100/5)]`       | `{ col: 'calc(100/5)' }`      |                                                             |
| **Short CSS Variable** | `grid-column: var(--col)`                                  | `col-(--col)`             | `{ col: '--col' }`            | **Sugar**: Auto-detects `--`.                               |

## Grid Row (Start/End/Span)

Controlling row sizing and placement.

| Concept                | CSS Rule                                                | Tailwind v4 Class         | `sz` Prop (Canonical)         | Note                                                        |
| :--------------------- | :------------------------------------------------------ | :------------------------ | :---------------------------- | :---------------------------------------------------------- |
| **Auto**               | `grid-row: auto`                                        | `row-auto`                | `{ row: 'auto' }`             |                                                             |
| **Span**               | `grid-row: span <number> / span <number>`               | `row-span-<number>`       | `{ rowSpan: <number> }`       | v4: fully dynamic, no static scale, accept any integer bare |
| **Span Full**          | `grid-row: 1 / -1`                                      | `row-span-full`           | `{ rowSpan: 'full' }`         |                                                             |
| **Span Arbitrary**     | `grid-row: span 50px / span 50px`                       | `row-span-[50px]`         | `{ rowSpan: '50px' }`         |                                                             |
| **Span CSS Variable**  | `grid-row: span var(--row-span) / span var(--row-span)` | `row-span-(--row-span)`   | `{ rowSpan: '--row-span' }`   | **Sugar**: Auto-detects `--`.                               |
| **Start**              | `grid-row-start: <number>`                              | `row-start-<number>`      | `{ rowStart: <number> }`      | v4: fully dynamic, no static scale, accept any integer bare |
| **Start Negative**     | `grid-row-start: calc(<number> * -1)`                   | `-row-start-<number>`     | `{ rowStart: -<number> }`     |                                                             |
| **Start Auto**         | `grid-row-start: auto`                                  | `row-start-auto`          | `{ rowStart: 'auto' }`        |                                                             |
| **Start Arbitrary**    | `grid-row-start: calc(100/5)`                           | `row-start-[calc(100/5)]` | `{ rowStart: 'calc(100/5)' }` |                                                             |
| **Start CSS Variable** | `grid-row-start: var(--row-start)`                      | `row-start-(--row-start)` | `{ rowStart: '--row-start' }` | **Sugar**: Auto-detects `--`.                               |
| **End**                | `grid-row-end: <number>`                                | `row-end-<number>`        | `{ rowEnd: <number> }`        | v4: fully dynamic, no static scale, accept any integer bare |
| **End Negative**       | `grid-row-end: calc(<number> * -1)`                     | `-row-end-<number>`       | `{ rowEnd: -<number> }`       |                                                             |
| **End Auto**           | `grid-row-end: auto`                                    | `row-end-auto`            | `{ rowEnd: 'auto' }`          |                                                             |
| **End Arbitrary**      | `grid-row-end: calc(100/5)`                             | `row-end-[calc(100/5)]`   | `{ rowEnd: 'calc(100/5)' }`   |                                                             |
| **End CSS Variable**   | `grid-row-end: var(--row-end)`                          | `row-end-(--row-end)`     | `{ rowEnd: '--row-end' }`     | **Sugar**: Auto-detects `--`.                               |
| **Short**              | `grid-row: <number>`                                    | `row-<number>`            | `{ row: <number> }`           | v4: fully dynamic, no static scale, accept any integer bare |
| **Short Negative**     | `grid-row: calc(<number> * -1)`                         | `-row-<number>`           | `{ row: -<number> }`          |                                                             |
| **Short Arbitrary**    | `grid-row: calc(100/5)`                                 | `row-[calc(100/5)]`       | `{ row: 'calc(100/5)' }`      |                                                             |
| **Short CSS Variable** | `grid-row: var(--row)`                                  | `row-(--row)`             | `{ row: '--row' }`            | **Sugar**: Auto-detects `--`.                               |

## Grid Auto Flow

Controlling auto-placement algorithm.

| Concept       | CSS Rule                       | Tailwind v4 Class     | `sz` Prop (Canonical)       |
| :------------ | :----------------------------- | :-------------------- | :-------------------------- |
| **Row**       | `grid-auto-flow: row`          | `grid-flow-row`       | `{ gridFlow: 'row' }`       |
| **Col**       | `grid-auto-flow: column`       | `grid-flow-col`       | `{ gridFlow: 'col' }`       |
| **Dense**     | `grid-auto-flow: dense`        | `grid-flow-dense`     | `{ gridFlow: 'dense' }`     |
| **Row Dense** | `grid-auto-flow: row dense`    | `grid-flow-row-dense` | `{ gridFlow: 'row-dense' }` |
| **Col Dense** | `grid-auto-flow: column dense` | `grid-flow-col-dense` | `{ gridFlow: 'col-dense' }` |

## Grid Auto Columns

Controlling implicit column sizing.

| Concept          | CSS Rule                              | Tailwind v4 Class           | `sz` Prop (Canonical)           |
| :--------------- | :------------------------------------ | :-------------------------- | :------------------------------ |
| **Auto**         | `grid-auto-columns: auto`             | `auto-cols-auto`            | `{ autoCols: 'auto' }`          |
| **Min**          | `grid-auto-columns: min-content`      | `auto-cols-min`             | `{ autoCols: 'min' }`           |
| **Max**          | `grid-auto-columns: max-content`      | `auto-cols-max`             | `{ autoCols: 'max' }`           |
| **Fr**           | `grid-auto-columns: minmax(0, 1fr)`   | `auto-cols-fr`              | `{ autoCols: 'fr' }`            |
| **Arbitrary**    | `grid-auto-columns: minmax(0, 2fr)`   | `auto-cols-[minmax(0,2fr)]` | `{ autoCols: 'minmax(0,2fr)' }` |
| **CSS Variable** | `grid-auto-columns: var(--auto-cols)` | `auto-cols-(--auto-cols)`   | `{ autoCols: '--auto-cols' }`   |

## Grid Auto Rows

Controlling implicit row sizing.

| Concept          | CSS Rule                           | Tailwind v4 Class           | `sz` Prop (Canonical)           |
| :--------------- | :--------------------------------- | :-------------------------- | :------------------------------ |
| **Auto**         | `grid-auto-rows: auto`             | `auto-rows-auto`            | `{ autoRows: 'auto' }`          |
| **Min**          | `grid-auto-rows: min-content`      | `auto-rows-min`             | `{ autoRows: 'min' }`           |
| **Max**          | `grid-auto-rows: max-content`      | `auto-rows-max`             | `{ autoRows: 'max' }`           |
| **Fr**           | `grid-auto-rows: minmax(0, 1fr)`   | `auto-rows-fr`              | `{ autoRows: 'fr' }`            |
| **Arbitrary**    | `grid-auto-rows: minmax(0, 2fr)`   | `auto-rows-[minmax(0,2fr)]` | `{ autoRows: 'minmax(0,2fr)' }` |
| **CSS Variable** | `grid-auto-rows: var(--auto-rows)` | `auto-rows-(--auto-rows)`   | `{ autoRows: '--auto-rows' }`   |

## Gap

Controlling gutters.

| Concept                | CSS Rule                                      | Tailwind v4 Class | `sz` Prop (Canonical) | Note                                                                             |
| :--------------------- | :-------------------------------------------- | :---------------- | :-------------------- | :------------------------------------------------------------------------------- |
| **Gap**                | `gap: calc(var(--spacing) * <number>)`        | `gap-<number>`    | `{ gap: <number> }`   | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Gap Arbitrary**      | `gap: 24px`                                   | `gap-[24px]`      | `{ gap: '24px' }`     |                                                                                  |
| **Gap CSS Variable**   | `gap: var(--gap)`                             | `gap-(--gap)`     | `{ gap: '--gap' }`    | **Sugar**: Auto-detects `--`.                                                    |
| **Gap X**              | `column-gap: calc(var(--spacing) * <number>)` | `gap-x-<number>`  | `{ gapX: <number> }`  | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Gap X Arbitrary**    | `column-gap: 24px`                            | `gap-x-[24px]`    | `{ gapX: '24px' }`    |                                                                                  |
| **Gap X CSS Variable** | `column-gap: var(--gap-x)`                    | `gap-x-(--gap-x)` | `{ gapX: '--gap-x' }` | **Sugar**: Auto-detects `--`.                                                    |
| **Gap Y**              | `row-gap: calc(var(--spacing) * <number>)`    | `gap-y-<number>`  | `{ gapY: <number> }`  | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Gap Y Arbitrary**    | `row-gap: 24px`                               | `gap-y-[24px]`    | `{ gapY: '24px' }`    |                                                                                  |
| **Gap Y CSS Variable** | `row-gap: var(--gap-y)`                       | `gap-y-(--gap-y)` | `{ gapY: '--gap-y' }` | **Sugar**: Auto-detects `--`.                                                    |

## Justify Content

Controlling placement along the main axis.

| Concept         | CSS Rule                         | Tailwind v4 Class     | `sz` Prop (Canonical)        |
| :-------------- | :------------------------------- | :-------------------- | :--------------------------- |
| **Normal**      | `justify-content: normal`        | `justify-normal`      | `{ justify: 'normal' }`      |
| **Start**       | `justify-content: flex-start`    | `justify-start`       | `{ justify: 'start' }`       |
| **End**         | `justify-content: flex-end`      | `justify-end`         | `{ justify: 'end' }`         |
| **End Safe**    | `justify-content: safe flex-end` | `justify-end-safe`    | `{ justify: 'end-safe' }`    |
| **Center**      | `justify-content: center`        | `justify-center`      | `{ justify: 'center' }`      |
| **Center Safe** | `justify-content: safe center`   | `justify-center-safe` | `{ justify: 'center-safe' }` |
| **Between**     | `justify-content: space-between` | `justify-between`     | `{ justify: 'between' }`     |
| **Around**      | `justify-content: space-around`  | `justify-around`      | `{ justify: 'around' }`      |
| **Evenly**      | `justify-content: space-evenly`  | `justify-evenly`      | `{ justify: 'evenly' }`      |
| **Stretch**     | `justify-content: stretch`       | `justify-stretch`     | `{ justify: 'stretch' }`     |
| **Baseline**    | `justify-content: baseline`      | `justify-baseline`    | `{ justify: 'baseline' }`    |

## Justify Items

Controlling grid item alignment inline axis.

| Concept         | CSS Rule                     | Tailwind v4 Class           | `sz` Prop (Canonical)             |
| :-------------- | :--------------------------- | :-------------------------- | :-------------------------------- |
| **Start**       | `justify-items: start`       | `justify-items-start`       | `{ justifyItems: 'start' }`       |
| **End**         | `justify-items: end`         | `justify-items-end`         | `{ justifyItems: 'end' }`         |
| **End Safe**    | `justify-items: safe end`    | `justify-items-end-safe`    | `{ justifyItems: 'end-safe' }`    |
| **Center**      | `justify-items: center`      | `justify-items-center`      | `{ justifyItems: 'center' }`      |
| **Center Safe** | `justify-items: safe center` | `justify-items-center-safe` | `{ justifyItems: 'center-safe' }` |
| **Stretch**     | `justify-items: stretch`     | `justify-items-stretch`     | `{ justifyItems: 'stretch' }`     |
| **Normal**      | `justify-items: normal`      | `justify-items-normal`      | `{ justifyItems: 'normal' }`      |

## Justify Self

Controlling individual item alignment.

| Concept         | CSS Rule                    | Tailwind v4 Class          | `sz` Prop (Canonical)            | `sz` Prop (Alias) |
| :-------------- | :-------------------------- | :------------------------- | :------------------------------- | :---------------- |
| **Auto**        | `justify-self: auto`        | `justify-self-auto`        | `{ justifySelf: 'auto' }`        |                   |
| **Start**       | `justify-self: start`       | `justify-self-start`       | `{ justifySelf: 'start' }`       |                   |
| **End**         | `justify-self: end`         | `justify-self-end`         | `{ justifySelf: 'end' }`         |                   |
| **End Safe**    | `justify-self: safe end`    | `justify-self-end-safe`    | `{ justifySelf: 'end-safe' }`    |                   |
| **Center**      | `justify-self: center`      | `justify-self-center`      | `{ justifySelf: 'center' }`      |                   |
| **Center Safe** | `justify-self: safe center` | `justify-self-center-safe` | `{ justifySelf: 'center-safe' }` |                   |
| **Stretch**     | `justify-self: stretch`     | `justify-self-stretch`     | `{ justifySelf: 'stretch' }`     |                   |

## Align Content

Controlling placement along the cross axis.

| Concept      | CSS Rule                       | Tailwind v4 Class  | `sz` Prop (Canonical)          |
| :----------- | :----------------------------- | :----------------- | :----------------------------- |
| **Normal**   | `align-content: normal`        | `content-normal`   | `{ alignContent: 'normal' }`   |
| **Start**    | `align-content: flex-start`    | `content-start`    | `{ alignContent: 'start' }`    |
| **End**      | `align-content: flex-end`      | `content-end`      | `{ alignContent: 'end' }`      |
| **Center**   | `align-content: center`        | `content-center`   | `{ alignContent: 'center' }`   |
| **Between**  | `align-content: space-between` | `content-between`  | `{ alignContent: 'between' }`  |
| **Around**   | `align-content: space-around`  | `content-around`   | `{ alignContent: 'around' }`   |
| **Evenly**   | `align-content: space-evenly`  | `content-evenly`   | `{ alignContent: 'evenly' }`   |
| **Stretch**  | `align-content: stretch`       | `content-stretch`  | `{ alignContent: 'stretch' }`  |
| **Baseline** | `align-content: baseline`      | `content-baseline` | `{ alignContent: 'baseline' }` |

## Align Items

Controlling flex item alignment cross axis.

| Concept           | CSS Rule                     | Tailwind v4 Class     | `sz` Prop (Canonical)        | `sz` Prop (Alias)         |
| :---------------- | :--------------------------- | :-------------------- | :--------------------------- | :------------------------ |
| **Start**         | `align-items: flex-start`    | `items-start`         | `{ items: 'start' }`         | `{ alignItems: 'start' }` |
| **End**           | `align-items: flex-end`      | `items-end`           | `{ items: 'end' }`           |                           |
| **End Safe**      | `align-items: safe end`      | `items-end-safe`      | `{ items: 'end-safe' }`      |                           |
| **Center**        | `align-items: center`        | `items-center`        | `{ items: 'center' }`        |                           |
| **Center Safe**   | `align-items: safe center`   | `items-center-safe`   | `{ items: 'center-safe' }`   |                           |
| **Baseline**      | `align-items: baseline`      | `items-baseline`      | `{ items: 'baseline' }`      |                           |
| **Baseline Last** | `align-items: last baseline` | `items-baseline-last` | `{ items: 'baseline-last' }` |                           |
| **Stretch**       | `align-items: stretch`       | `items-stretch`       | `{ items: 'stretch' }`       |                           |

## Align Self

Controlling individual item alignment.

| Concept           | CSS Rule                    | Tailwind v4 Class    | `sz` Prop (Canonical)       |
| :---------------- | :-------------------------- | :------------------- | :-------------------------- |
| **Auto**          | `align-self: auto`          | `self-auto`          | `{ self: 'auto' }`          |
| **Start**         | `align-self: flex-start`    | `self-start`         | `{ self: 'start' }`         |
| **End**           | `align-self: flex-end`      | `self-end`           | `{ self: 'end' }`           |
| **End Safe**      | `align-self: safe end`      | `self-end-safe`      | `{ self: 'end-safe' }`      |
| **Center**        | `align-self: center`        | `self-center`        | `{ self: 'center' }`        |
| **Center Safe**   | `align-self: safe center`   | `self-center-safe`   | `{ self: 'center-safe' }`   |
| **Stretch**       | `align-self: stretch`       | `self-stretch`       | `{ self: 'stretch' }`       |
| **Baseline**      | `align-self: baseline`      | `self-baseline`      | `{ self: 'baseline' }`      |
| **Baseline Last** | `align-self: last baseline` | `self-baseline-last` | `{ self: 'baseline-last' }` |

## Place Content

Shorthand for align-content and justify-content.

| Concept         | CSS Rule                       | Tailwind v4 Class           | `sz` Prop (Canonical)             | `sz` Prop (Alias) |
| :-------------- | :----------------------------- | :-------------------------- | :-------------------------------- | :---------------- |
| **Center**      | `place-content: center`        | `place-content-center`      | `{ placeContent: 'center' }`      |                   |
| **Center Safe** | `place-content: safe center`   | `place-content-center-safe` | `{ placeContent: 'center-safe' }` |                   |
| **Start**       | `place-content: start`         | `place-content-start`       | `{ placeContent: 'start' }`       |                   |
| **End**         | `place-content: end`           | `place-content-end`         | `{ placeContent: 'end' }`         |                   |
| **End Safe**    | `place-content: safe end`      | `place-content-end-safe`    | `{ placeContent: 'end-safe' }`    |                   |
| **Between**     | `place-content: space-between` | `place-content-between`     | `{ placeContent: 'between' }`     |                   |
| **Around**      | `place-content: space-around`  | `place-content-around`      | `{ placeContent: 'around' }`      |                   |
| **Evenly**      | `place-content: space-evenly`  | `place-content-evenly`      | `{ placeContent: 'evenly' }`      |                   |
| **Stretch**     | `place-content: stretch`       | `place-content-stretch`     | `{ placeContent: 'stretch' }`     |                   |
| **Baseline**    | `place-content: baseline`      | `place-content-baseline`    | `{ placeContent: 'baseline' }`    |                   |

## Place Items

Shorthand for align-items and justify-items.

| Concept         | CSS Rule                   | Tailwind v4 Class         | `sz` Prop (Canonical)           | `sz` Prop (Alias) |
| :-------------- | :------------------------- | :------------------------ | :------------------------------ | :---------------- |
| **Start**       | `place-items: start`       | `place-items-start`       | `{ placeItems: 'start' }`       |                   |
| **End**         | `place-items: end`         | `place-items-end`         | `{ placeItems: 'end' }`         |                   |
| **End Safe**    | `place-items: safe end`    | `place-items-end-safe`    | `{ placeItems: 'end-safe' }`    |                   |
| **Center**      | `place-items: center`      | `place-items-center`      | `{ placeItems: 'center' }`      |                   |
| **Center Safe** | `place-items: safe center` | `place-items-center-safe` | `{ placeItems: 'center-safe' }` |                   |
| **Stretch**     | `place-items: stretch`     | `place-items-stretch`     | `{ placeItems: 'stretch' }`     |                   |
| **Baseline**    | `place-items: baseline`    | `place-items-baseline`    | `{ placeItems: 'baseline' }`    |                   |

## Place Self

Shorthand for align-self and justify-self.

| Concept         | CSS Rule                  | Tailwind v4 Class        | `sz` Prop (Canonical)          | `sz` Prop (Alias) |
| :-------------- | :------------------------ | :----------------------- | :----------------------------- | :---------------- |
| **Auto**        | `place-self: auto`        | `place-self-auto`        | `{ placeSelf: 'auto' }`        |                   |
| **Start**       | `place-self: start`       | `place-self-start`       | `{ placeSelf: 'start' }`       |                   |
| **End**         | `place-self: end`         | `place-self-end`         | `{ placeSelf: 'end' }`         |                   |
| **End Safe**    | `place-self: safe end`    | `place-self-end-safe`    | `{ placeSelf: 'end-safe' }`    |                   |
| **Center**      | `place-self: center`      | `place-self-center`      | `{ placeSelf: 'center' }`      |                   |
| **Center Safe** | `place-self: safe center` | `place-self-center-safe` | `{ placeSelf: 'center-safe' }` |                   |
| **Stretch**     | `place-self: stretch`     | `place-self-stretch`     | `{ placeSelf: 'stretch' }`     |                   |


# Interactivity

Utilities for controlling how users interact with elements.

## Accent Color

Utilities for controlling the accent color of a form control.

| Concept       | CSS Rule                 | Tailwind v4 Class  | `sz` Prop (Object Syntax) | Note |
| :------------ | :----------------------- | :----------------- | :------------------------ | :--- |
| **Color**     | `accent-color: (etc)`    | `accent-red-500`   | `{ accent: 'red-500' }`   |      |
| **Arbitrary** | `accent-color: (etc)`    | `accent-[#50d71e]` | `{ accent: '#50d71e' }`   |      |
| **Variable**  | `accent-color: var(--c)` | `accent-(--c)`     | `{ accent: '--c' }`       |      |

## Appearance

Utilities for suppressing native form control styling.

| Concept  | CSS Rule            | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------- | :------------------ | :---------------- | :------------------------ | :--- |
| **None** | `appearance: none;` | `appearance-none` | `{ appearance: 'none' }`  |      |
| **Auto** | `appearance: auto;` | `appearance-auto` | `{ appearance: 'auto' }`  |      |

## Caret Color

Utilities for controlling the color of the text input cursor.

| Concept       | CSS Rule                | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------------ | :---------------------- | :---------------- | :------------------------ | :--- |
| **Color**     | `caret-color: (etc)`    | `caret-red-500`   | `{ caret: 'red-500' }`    |      |
| **Arbitrary** | `caret-color: (etc)`    | `caret-[#50d71e]` | `{ caret: '#50d71e' }`    |      |
| **Variable**  | `caret-color: var(--c)` | `caret-(--c)`     | `{ caret: '--c' }`        |      |

## Color Scheme

Utilities for specifying the color scheme an element should be rendered with.

| Concept        | CSS Rule                   | Tailwind v4 Class   | `sz` Prop (Object Syntax)  | Note |
| :------------- | :------------------------- | :------------------ | :------------------------- | :--- |
| **Dark**       | `color-scheme: dark`       | `scheme-dark`       | `{ scheme: 'dark' }`       |      |
| **Light**      | `color-scheme: light`      | `scheme-light`      | `{ scheme: 'light' }`      |      |
| **Normal**     | `color-scheme: normal`     | `scheme-normal`     | `{ scheme: 'normal' }`     |      |
| **Light-Dark** | `color-scheme: light dark` | `scheme-light-dark` | `{ scheme: 'light-dark' }` |      |
| **Only Dark**  | `color-scheme: only dark`  | `scheme-only-dark`  | `{ scheme: 'only-dark' }`  |      |
| **Only Light** | `color-scheme: only light` | `scheme-only-light` | `{ scheme: 'only-light' }` |      |

## Cursor

Utilities for controlling the cursor style when hovering over an element.

| Concept       | CSS Rule           | Tailwind v4 Class                    | `sz` Prop (Object Syntax)           | Note |
| :------------ | :----------------- | :----------------------------------- | :---------------------------------- | :--- |
| **Keywords**  | `cursor: (etc)`    | `cursor-pointer`, `cursor-wait`(etc) | `{ cursor: 'pointer' }`             |      |
| **Arbitrary** | `cursor: (etc)`    | `cursor-[url(h.cur),_pointer]`       | `{ cursor: 'url(h.cur),_pointer' }` |      |
| **Variable**  | `cursor: var(--c)` | `cursor-(--c)`                       | `{ cursor: '--c' }`                 |      |

## Field Sizing

Utilities for controlling the sizing of form fields.

| Concept     | CSS Rule                 | Tailwind v4 Class      | `sz` Prop (Object Syntax)    | Note |
| :---------- | :----------------------- | :--------------------- | :--------------------------- | :--- |
| **Fixed**   | `field-sizing: fixed;`   | `field-sizing-fixed`   | `{ fieldSizing: 'fixed' }`   |      |
| **Content** | `field-sizing: content;` | `field-sizing-content` | `{ fieldSizing: 'content' }` |      |

## Pointer Events

Utilities for controlling whether an element responds to pointer events.

| Concept  | CSS Rule                | Tailwind v4 Class     | `sz` Prop (Object Syntax)   | Note |
| :------- | :---------------------- | :-------------------- | :-------------------------- | :--- |
| **None** | `pointer-events: none;` | `pointer-events-none` | `{ pointerEvents: 'none' }` |      |
| **Auto** | `pointer-events: auto;` | `pointer-events-auto` | `{ pointerEvents: 'auto' }` |      |

## Resize

Utilities for controlling whether an element is resizable.

| Concept        | CSS Rule              | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------------- | :-------------------- | :---------------- | :------------------------ | :--- |
| **None**       | `resize: none;`       | `resize-none`     | `{ resize: 'none' }`      |      |
| **Both**       | `resize: both;`       | `resize`          | `{ resize: true }`        |      |
| **Vertical**   | `resize: vertical;`   | `resize-y`        | `{ resize: 'y' }`         |      |
| **Horizontal** | `resize: horizontal;` | `resize-x`        | `{ resize: 'x' }`         |      |

## Scroll Behavior

Utilities for controlling the scroll behavior of an element.

| Concept    | CSS Rule                   | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :--------- | :------------------------- | :---------------- | :------------------------ | :--- |
| **Auto**   | `scroll-behavior: auto;`   | `scroll-auto`     | `{ scroll: 'auto' }`      |      |
| **Smooth** | `scroll-behavior: smooth;` | `scroll-smooth`   | `{ scroll: 'smooth' }`    |      |

## Scroll Margin

Utilities for controlling the scroll offset of an element.

| Concept           | CSS Rule                           | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                 |
| :---------------- | :--------------------------------- | :---------------- | :------------------------ | :------------------- |
| Scroll Margin 0   | `scroll-margin: 0px`               | `scroll-m-0`      | `{ scrollM: 0 }`          |                      |
| Scroll Margin px  | `scroll-margin: 1px`               | `scroll-m-px`     | `{ scrollM: 'px' }`       |                      |
| Scroll Margin 0.5 | `scroll-margin: 0.125rem`          | `scroll-m-0.5`    | `{ scrollM: 0.5 }`        |                      |
| Scroll Margin 1   | `scroll-margin: 0.25rem`           | `scroll-m-1`      | `{ scrollM: 1 }`          |                      |
| Scroll Margin 1.5 | `scroll-margin: 0.375rem`          | `scroll-m-1.5`    | `{ scrollM: 1.5 }`        |                      |
| Scroll Margin 2   | `scroll-margin: 0.5rem`            | `scroll-m-2`      | `{ scrollM: 2 }`          |                      |
| Scroll Margin 2.5 | `scroll-margin: 0.625rem`          | `scroll-m-2.5`    | `{ scrollM: 2.5 }`        |                      |
| Scroll Margin 3   | `scroll-margin: 0.75rem`           | `scroll-m-3`      | `{ scrollM: 3 }`          |                      |
| Scroll Margin 3.5 | `scroll-margin: 0.875rem`          | `scroll-m-3.5`    | `{ scrollM: 3.5 }`        |                      |
| Scroll Margin 4   | `scroll-margin: 1rem`              | `scroll-m-4`      | `{ scrollM: 4 }`          |                      |
| Scroll Margin 5   | `scroll-margin: 1.25rem`           | `scroll-m-5`      | `{ scrollM: 5 }`          |                      |
| Scroll Margin 6   | `scroll-margin: 1.5rem`            | `scroll-m-6`      | `{ scrollM: 6 }`          |                      |
| Scroll Margin 7   | `scroll-margin: 1.75rem`           | `scroll-m-7`      | `{ scrollM: 7 }`          |                      |
| Scroll Margin 8   | `scroll-margin: 2rem`              | `scroll-m-8`      | `{ scrollM: 8 }`          |                      |
| Scroll Margin 9   | `scroll-margin: 2.25rem`           | `scroll-m-9`      | `{ scrollM: 9 }`          |                      |
| Scroll Margin 10  | `scroll-margin: 2.5rem`            | `scroll-m-10`     | `{ scrollM: 10 }`         |                      |
| Scroll Margin 11  | `scroll-margin: 2.75rem`           | `scroll-m-11`     | `{ scrollM: 11 }`         |                      |
| Scroll Margin 12  | `scroll-margin: 3rem`              | `scroll-m-12`     | `{ scrollM: 12 }`         |                      |
| Scroll Margin 14  | `scroll-margin: 3.5rem`            | `scroll-m-14`     | `{ scrollM: 14 }`         |                      |
| Scroll Margin 16  | `scroll-margin: 4rem`              | `scroll-m-16`     | `{ scrollM: 16 }`         |                      |
| Scroll Margin 20  | `scroll-margin: 5rem`              | `scroll-m-20`     | `{ scrollM: 20 }`         |                      |
| Scroll Margin 24  | `scroll-margin: 6rem`              | `scroll-m-24`     | `{ scrollM: 24 }`         |                      |
| Scroll Margin 28  | `scroll-margin: 7rem`              | `scroll-m-28`     | `{ scrollM: 28 }`         |                      |
| Scroll Margin 32  | `scroll-margin: 8rem`              | `scroll-m-32`     | `{ scrollM: 32 }`         |                      |
| Scroll Margin 36  | `scroll-margin: 9rem`              | `scroll-m-36`     | `{ scrollM: 36 }`         |                      |
| Scroll Margin 40  | `scroll-margin: 10rem`             | `scroll-m-40`     | `{ scrollM: 40 }`         |                      |
| Scroll Margin 44  | `scroll-margin: 11rem`             | `scroll-m-44`     | `{ scrollM: 44 }`         |                      |
| Scroll Margin 48  | `scroll-margin: 12rem`             | `scroll-m-48`     | `{ scrollM: 48 }`         |                      |
| Scroll Margin 52  | `scroll-margin: 13rem`             | `scroll-m-52`     | `{ scrollM: 52 }`         |                      |
| Scroll Margin 56  | `scroll-margin: 14rem`             | `scroll-m-56`     | `{ scrollM: 56 }`         |                      |
| Scroll Margin 60  | `scroll-margin: 15rem`             | `scroll-m-60`     | `{ scrollM: 60 }`         |                      |
| Scroll Margin 64  | `scroll-margin: 16rem`             | `scroll-m-64`     | `{ scrollM: 64 }`         |                      |
| Scroll Margin 72  | `scroll-margin: 18rem`             | `scroll-m-72`     | `{ scrollM: 72 }`         |                      |
| Scroll Margin 80  | `scroll-margin: 20rem`             | `scroll-m-80`     | `{ scrollM: 80 }`         |                      |
| Scroll Margin 96  | `scroll-margin: 24rem`             | `scroll-m-96`     | `{ scrollM: 96 }`         |                      |
| **X/Y/T/R/B/L**   | `scroll-margin-top: (etc)`         | `scroll-mt-4`     | `{ scrollMt: 4 }`         |                      |
| **Block Start**   | `scroll-margin-block-start: (etc)` | `scroll-mbs-4`    | `{ scrollMbs: 4 }`        | v4.2: logical block. |
| **Block End**     | `scroll-margin-block-end: (etc)`   | `scroll-mbe-4`    | `{ scrollMbe: 4 }`        | v4.2: logical block. |
| **Negative**      | `scroll-margin: -(etc)`            | `-scroll-m-4`     | `{ scrollM: -4 }`         |                      |
| **Arbitrary**     | `scroll-margin: 5px`               | `scroll-m-[5px]`  | `{ scrollM: '5px' }`      |                      |
| **Variable**      | `scroll-margin: var(--m)`          | `scroll-m-(--m)`  | `{ scrollM: '--m' }`      |                      |

## Scroll Padding

Utilities for controlling an element's scroll padding.

| Concept            | CSS Rule                            | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                 |
| :----------------- | :---------------------------------- | :---------------- | :------------------------ | :------------------- |
| Scroll Padding 0   | `scroll-padding: 0px`               | `scroll-p-0`      | `{ scrollP: 0 }`          |                      |
| Scroll Padding px  | `scroll-padding: 1px`               | `scroll-p-px`     | `{ scrollP: 'px' }`       |                      |
| Scroll Padding 0.5 | `scroll-padding: 0.125rem`          | `scroll-p-0.5`    | `{ scrollP: 0.5 }`        |                      |
| Scroll Padding 1   | `scroll-padding: 0.25rem`           | `scroll-p-1`      | `{ scrollP: 1 }`          |                      |
| Scroll Padding 1.5 | `scroll-padding: 0.375rem`          | `scroll-p-1.5`    | `{ scrollP: 1.5 }`        |                      |
| Scroll Padding 2   | `scroll-padding: 0.5rem`            | `scroll-p-2`      | `{ scrollP: 2 }`          |                      |
| Scroll Padding 2.5 | `scroll-padding: 0.625rem`          | `scroll-p-2.5`    | `{ scrollP: 2.5 }`        |                      |
| Scroll Padding 3   | `scroll-padding: 0.75rem`           | `scroll-p-3`      | `{ scrollP: 3 }`          |                      |
| Scroll Padding 3.5 | `scroll-padding: 0.875rem`          | `scroll-p-3.5`    | `{ scrollP: 3.5 }`        |                      |
| Scroll Padding 4   | `scroll-padding: 1rem`              | `scroll-p-4`      | `{ scrollP: 4 }`          |                      |
| Scroll Padding 5   | `scroll-padding: 1.25rem`           | `scroll-p-5`      | `{ scrollP: 5 }`          |                      |
| Scroll Padding 6   | `scroll-padding: 1.5rem`            | `scroll-p-6`      | `{ scrollP: 6 }`          |                      |
| Scroll Padding 7   | `scroll-padding: 1.75rem`           | `scroll-p-7`      | `{ scrollP: 7 }`          |                      |
| Scroll Padding 8   | `scroll-padding: 2rem`              | `scroll-p-8`      | `{ scrollP: 8 }`          |                      |
| Scroll Padding 9   | `scroll-padding: 2.25rem`           | `scroll-p-9`      | `{ scrollP: 9 }`          |                      |
| Scroll Padding 10  | `scroll-padding: 2.5rem`            | `scroll-p-10`     | `{ scrollP: 10 }`         |                      |
| Scroll Padding 11  | `scroll-padding: 2.75rem`           | `scroll-p-11`     | `{ scrollP: 11 }`         |                      |
| Scroll Padding 12  | `scroll-padding: 3rem`              | `scroll-p-12`     | `{ scrollP: 12 }`         |                      |
| Scroll Padding 14  | `scroll-padding: 3.5rem`            | `scroll-p-14`     | `{ scrollP: 14 }`         |                      |
| Scroll Padding 16  | `scroll-padding: 4rem`              | `scroll-p-16`     | `{ scrollP: 16 }`         |                      |
| Scroll Padding 20  | `scroll-padding: 5rem`              | `scroll-p-20`     | `{ scrollP: 20 }`         |                      |
| Scroll Padding 24  | `scroll-padding: 6rem`              | `scroll-p-24`     | `{ scrollP: 24 }`         |                      |
| Scroll Padding 28  | `scroll-padding: 7rem`              | `scroll-p-28`     | `{ scrollP: 28 }`         |                      |
| Scroll Padding 32  | `scroll-padding: 8rem`              | `scroll-p-32`     | `{ scrollP: 32 }`         |                      |
| Scroll Padding 36  | `scroll-padding: 9rem`              | `scroll-p-36`     | `{ scrollP: 36 }`         |                      |
| Scroll Padding 40  | `scroll-padding: 10rem`             | `scroll-p-40`     | `{ scrollP: 40 }`         |                      |
| Scroll Padding 44  | `scroll-padding: 11rem`             | `scroll-p-44`     | `{ scrollP: 44 }`         |                      |
| Scroll Padding 48  | `scroll-padding: 12rem`             | `scroll-p-48`     | `{ scrollP: 48 }`         |                      |
| Scroll Padding 52  | `scroll-padding: 13rem`             | `scroll-p-52`     | `{ scrollP: 52 }`         |                      |
| Scroll Padding 56  | `scroll-padding: 14rem`             | `scroll-p-56`     | `{ scrollP: 56 }`         |                      |
| Scroll Padding 60  | `scroll-padding: 15rem`             | `scroll-p-60`     | `{ scrollP: 60 }`         |                      |
| Scroll Padding 64  | `scroll-padding: 16rem`             | `scroll-p-64`     | `{ scrollP: 64 }`         |                      |
| Scroll Padding 72  | `scroll-padding: 18rem`             | `scroll-p-72`     | `{ scrollP: 72 }`         |                      |
| Scroll Padding 80  | `scroll-padding: 20rem`             | `scroll-p-80`     | `{ scrollP: 80 }`         |                      |
| Scroll Padding 96  | `scroll-padding: 24rem`             | `scroll-p-96`     | `{ scrollP: 96 }`         |                      |
| **X/Y/T/R/B/L**    | `scroll-padding-top: (etc)`         | `scroll-pt-4`     | `{ scrollPt: 4 }`         |                      |
| **Block Start**    | `scroll-padding-block-start: (etc)` | `scroll-pbs-4`    | `{ scrollPbs: 4 }`        | v4.2: logical block. |
| **Block End**      | `scroll-padding-block-end: (etc)`   | `scroll-pbe-4`    | `{ scrollPbe: 4 }`        | v4.2: logical block. |
| **Arbitrary**      | `scroll-padding: 5px`               | `scroll-p-[5px]`  | `{ scrollP: '5px' }`      |                      |
| **Variable**       | `scroll-padding: var(--p)`          | `scroll-p-(--p)`  | `{ scrollP: '--p' }`      |                      |

## Scroll Snap Align

Utilities for controlling the snap alignment of an element within a snap container.

| Concept    | CSS Rule                    | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :--------- | :-------------------------- | :---------------- | :------------------------ | :--- |
| **Start**  | `scroll-snap-align: start`  | `snap-start`      | `{ snapAlign: 'start' }`  |      |
| **End**    | `scroll-snap-align: end`    | `snap-end`        | `{ snapAlign: 'end' }`    |      |
| **Center** | `scroll-snap-align: center` | `snap-center`     | `{ snapAlign: 'center' }` |      |
| **None**   | `scroll-snap-align: none`   | `snap-align-none` | `{ snapAlign: 'none' }`   |      |

## Scroll Snap Stop

Utilities for controlling whether an element's container stops on it.

| Concept    | CSS Rule                   | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :--------- | :------------------------- | :---------------- | :------------------------ | :--- |
| **Normal** | `scroll-snap-stop: normal` | `snap-normal`     | `{ snapStop: 'normal' }`  |      |
| **Always** | `scroll-snap-stop: always` | `snap-always`     | `{ snapStop: 'always' }`  |      |

## Scroll Snap Type

Utilities for controlling how strictly snap points are enforced.

| Concept  | CSS Rule                 | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------- | :----------------------- | :---------------- | :------------------------ | :--- |
| **None** | `scroll-snap-type: none` | `snap-none`       | `{ snapType: 'none' }`    |      |
| **X**    | `scroll-snap-type: x`    | `snap-x`          | `{ snapType: 'x' }`       |      |
| **Y**    | `scroll-snap-type: y`    | `snap-y`          | `{ snapType: 'y' }`       |      |
| **Both** | `scroll-snap-type: both` | `snap-both`       | `{ snapType: 'both' }`    |      |

## Scroll Snap Strictness

Utilities for controlling the strictness of snap points.

| Concept       | CSS Rule                        | Tailwind v4 Class | `sz` Prop (Object Syntax)         | Note |
| :------------ | :------------------------------ | :---------------- | :-------------------------------- | :--- |
| **Mandatory** | `scroll-snap-type: * mandatory` | `snap-mandatory`  | `{ snapStrictness: 'mandatory' }` |      |
| **Proximity** | `scroll-snap-type: * proximity` | `snap-proximity`  | `{ snapStrictness: 'proximity' }` |      |

## Touch Action

Utilities for controlling how an element can be panned and zoomed by a user on a touchscreen.

| Concept      | CSS Rule              | Tailwind v4 Class                              | `sz` Prop (Object Syntax) | Note |
| :----------- | :-------------------- | :--------------------------------------------- | :------------------------ | :--- |
| **Keywords** | `touch-action: (etc)` | `touch-auto`, `touch-none`, `touch-pan-x`(etc) | `{ touch: 'auto' }`       |      |

## User Select

Utilities for controlling whether the user can select text in an element.

| Concept  | CSS Rule             | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------- | :------------------- | :---------------- | :------------------------ | :--- |
| **None** | `user-select: none;` | `select-none`     | `{ select: 'none' }`      |      |
| **Auto** | `user-select: auto;` | `select-auto`     | `{ select: 'auto' }`      |      |
| **Text** | `user-select: text;` | `select-text`     | `{ select: 'text' }`      |      |
| **All**  | `user-select: all;`  | `select-all`      | `{ select: 'all' }`       |      |

## Will Change

Utilities for hinting to the browser how an element will change.

| Concept       | CSS Rule                | Tailwind v4 Class                             | `sz` Prop (Object Syntax) | Note |
| :------------ | :---------------------- | :-------------------------------------------- | :------------------------ | :--- |
| **Keywords**  | `will-change: (etc)`    | `will-change-auto`, `will-change-scroll`(etc) | `{ willChange: 'auto' }`  |      |
| **Arbitrary** | `will-change: <v>`      | `will-change-[<v>]`                           | `{ willChange: '<v>' }`   |      |
| **Variable**  | `will-change: var(--c)` | `will-change-(--c)`                           | `{ willChange: '--c' }`   |      |

## Scrollbar Width (v4.3)

Utilities for controlling the scrollbar width.

| Concept  | CSS Rule                | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------- | :---------------------- | :---------------- | :------------------------ | :--- |
| **Auto** | `scrollbar-width: auto` | `scrollbar-auto`  | `{ scrollbar: 'auto' }`   |      |
| **Thin** | `scrollbar-width: thin` | `scrollbar-thin`  | `{ scrollbar: 'thin' }`   |      |
| **None** | `scrollbar-width: none` | `scrollbar-none`  | `{ scrollbar: 'none' }`   |      |

## Scrollbar Color (v4.3)

Utilities for controlling the scrollbar thumb and track colors.

| Concept      | CSS Rule                        | Tailwind v4 Class        | `sz` Prop (Object Syntax)      | Note |
| :----------- | :------------------------------ | :----------------------- | :----------------------------- | :--- |
| **Thumb**    | `scrollbar-color: <color> ...`  | `scrollbar-thumb-<name>` | `{ scrollbarThumb: '<name>' }` |      |
| **Track**    | `scrollbar-color: ... <color>`  | `scrollbar-track-<name>` | `{ scrollbarTrack: '<name>' }` |      |
| **Variable** | `scrollbar-color: var(--c) ...` | `scrollbar-thumb-(--c)`  | `{ scrollbarThumb: '--c' }`    |      |

## Scrollbar Gutter (v4.3)

Utilities for controlling the scrollbar gutter behavior.

| Concept    | CSS Rule                              | Tailwind v4 Class         | `sz` Prop (Object Syntax)       | Note |
| :--------- | :------------------------------------ | :------------------------ | :------------------------------ | :--- |
| **Auto**   | `scrollbar-gutter: auto`              | `scrollbar-gutter-auto`   | `{ scrollbarGutter: 'auto' }`   |      |
| **Stable** | `scrollbar-gutter: stable`            | `scrollbar-gutter-stable` | `{ scrollbarGutter: 'stable' }` |      |
| **Both**   | `scrollbar-gutter: stable both-edges` | `scrollbar-gutter-both`   | `{ scrollbarGutter: 'both' }`   |      |

## Zoom (v4.3)

Utilities for controlling the zoom level of an element.

| Concept      | CSS Rule         | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :----------- | :--------------- | :---------------- | :------------------------ | :--- |
| **Scale**    | `zoom: <number>` | `zoom-<number>`   | `{ zoom: <number> }`      |      |
| **Variable** | `zoom: var(--z)` | `zoom-(--z)`      | `{ zoom: '--z' }`         |      |

## Tab Size (v4.3)

Utilities for controlling the width of tab characters.

| Concept       | CSS Rule             | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------------ | :------------------- | :---------------- | :------------------------ | :--- |
| **Number**    | `tab-size: <number>` | `tab-<number>`    | `{ tabSize: <number> }`   |      |
| **Arbitrary** | `tab-size: <v>`      | `tab-[<v>]`       | `{ tabSize: '<v>' }`      |      |
| **Variable**  | `tab-size: var(--t)` | `tab-(--t)`       | `{ tabSize: '--t' }`      |      |


# Layout

Controlling element positioning and visibility.

## Aspect Ratio

Setting aspect ratios.

| Concept          | CSS Rule                            | Tailwind v4 Class        | `sz` Prop (Object Syntax)     | Note                                                         |
| :--------------- | :---------------------------------- | :----------------------- | :---------------------------- | :----------------------------------------------------------- |
| **Auto**         | `aspect-ratio: auto`                | `aspect-auto`            | `{ aspect: 'auto' }`          |                                                              |
| **Square**       | `aspect-ratio: 1 / 1`               | `aspect-square`          | `{ aspect: 'square' }`        |                                                              |
| **Video**        | `aspect-ratio: 16 / 9`              | `aspect-video`           | `{ aspect: 'video' }`         |                                                              |
| **Arbitrary**    | `aspect-ratio: 4 / 3`               | `aspect-4/3`             | `{ aspect: '4/3' }`           | **Sugar**: Auto-detects fraction syntax only integer values. |
| **Arbitrary**    | `aspect-ratio: 4 / 2.5`             | `aspect-[4/2.5]`         | `{ aspect: '4/2.5' }`         | Decimal values require brackets.                             |
| **Arbitrary**    | `aspect-ratio: calc(4 * 3 + 1) / 3` | `aspect-[calc(4*3+1)/3]` | `{ aspect: 'calc(4*3+1)/3' }` |                                                              |
| **CSS Variable** | `aspect-ratio: var(--my-ratio)`     | `aspect-(--my-ratio)`    | `{ aspect: '--my-ratio' }`    | **Sugar**: Auto-detects `--`.                                |

## Columns

Multi-column layout.

| Concept          | CSS Rule                | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note                                                        |
| :--------------- | :---------------------- | :------------------ | :------------------------ | :---------------------------------------------------------- |
| **Auto**         | `columns: auto`         | `columns-auto`      | `{ columns: 'auto' }`     |                                                             |
| **Count (1-12)** | `columns: <number>`     | `columns-<number>`  | `{ columns: <number> }`   | v4: fully dynamic, no static scale, accept any integer bare |
| **Width (3xs)**  | `columns: 16rem`        | `columns-3xs`       | `{ columns: '3xs' }`      |                                                             |
| **Width (2xs)**  | `columns: 18rem`        | `columns-2xs`       | `{ columns: '2xs' }`      |                                                             |
| **Width (xs)**   | `columns: 20rem`        | `columns-xs`        | `{ columns: 'xs' }`       |                                                             |
| **Width (sm)**   | `columns: 24rem`        | `columns-sm`        | `{ columns: 'sm' }`       |                                                             |
| **Width (md)**   | `columns: 28rem`        | `columns-md`        | `{ columns: 'md' }`       |                                                             |
| **Width (lg)**   | `columns: 32rem`        | `columns-lg`        | `{ columns: 'lg' }`       |                                                             |
| **Width (xl)**   | `columns: 36rem`        | `columns-xl`        | `{ columns: 'xl' }`       |                                                             |
| **Width (2xl)**  | `columns: 42rem`        | `columns-2xl`       | `{ columns: '2xl' }`      |                                                             |
| **Width (3xl)**  | `columns: 48rem`        | `columns-3xl`       | `{ columns: '3xl' }`      |                                                             |
| **Width (4xl)**  | `columns: 56rem`        | `columns-4xl`       | `{ columns: '4xl' }`      |                                                             |
| **Width (5xl)**  | `columns: 64rem`        | `columns-5xl`       | `{ columns: '5xl' }`      |                                                             |
| **Width (6xl)**  | `columns: 72rem`        | `columns-6xl`       | `{ columns: '6xl' }`      |                                                             |
| **Width (7xl)**  | `columns: 80rem`        | `columns-7xl`       | `{ columns: '7xl' }`      |                                                             |
| **Arbitrary**    | `columns: 14rem`        | `columns-[14rem]`   | `{ columns: '14rem' }`    |                                                             |
| **CSS Variable** | `columns: var(--width)` | `columns-(--width)` | `{ columns: '--width' }`  | **Sugar**: Auto-detects `--`.                               |

## Break After

Controlling page/column breaks after an element.

| Concept        | CSS Rule                  | Tailwind v4 Class        | `sz` Prop (Object Syntax)      | Note |
| :------------- | :------------------------ | :----------------------- | :----------------------------- | :--- |
| **Auto**       | `break-after: auto`       | `break-after-auto`       | `{ breakAfter: 'auto' }`       |      |
| **Avoid**      | `break-after: avoid`      | `break-after-avoid`      | `{ breakAfter: 'avoid' }`      |      |
| **All**        | `break-after: all`        | `break-after-all`        | `{ breakAfter: 'all' }`        |      |
| **Avoid Page** | `break-after: avoid-page` | `break-after-avoid-page` | `{ breakAfter: 'avoid-page' }` |      |
| **Page**       | `break-after: page`       | `break-after-page`       | `{ breakAfter: 'page' }`       |      |
| **Left**       | `break-after: left`       | `break-after-left`       | `{ breakAfter: 'left' }`       |      |
| **Right**      | `break-after: right`      | `break-after-right`      | `{ breakAfter: 'right' }`      |      |
| **Column**     | `break-after: column`     | `break-after-column`     | `{ breakAfter: 'column' }`     |      |

## Break Before

Controlling page/column breaks before an element.

| Concept        | CSS Rule                   | Tailwind v4 Class         | `sz` Prop (Object Syntax)       | Note |
| :------------- | :------------------------- | :------------------------ | :------------------------------ | :--- |
| **Auto**       | `break-before: auto`       | `break-before-auto`       | `{ breakBefore: 'auto' }`       |      |
| **Avoid**      | `break-before: avoid`      | `break-before-avoid`      | `{ breakBefore: 'avoid' }`      |      |
| **All**        | `break-before: all`        | `break-before-all`        | `{ breakBefore: 'all' }`        |      |
| **Avoid Page** | `break-before: avoid-page` | `break-before-avoid-page` | `{ breakBefore: 'avoid-page' }` |      |
| **Page**       | `break-before: page`       | `break-before-page`       | `{ breakBefore: 'page' }`       |      |
| **Left**       | `break-before: left`       | `break-before-left`       | `{ breakBefore: 'left' }`       |      |
| **Right**      | `break-before: right`      | `break-before-right`      | `{ breakBefore: 'right' }`      |      |
| **Column**     | `break-before: column`     | `break-before-column`     | `{ breakBefore: 'column' }`     |      |

## Break Inside

Controlling page/column breaks within an element.

| Concept          | CSS Rule                     | Tailwind v4 Class           | `sz` Prop (Object Syntax)         | Note |
| :--------------- | :--------------------------- | :-------------------------- | :-------------------------------- | :--- |
| **Auto**         | `break-inside: auto`         | `break-inside-auto`         | `{ breakInside: 'auto' }`         |      |
| **Avoid**        | `break-inside: avoid`        | `break-inside-avoid`        | `{ breakInside: 'avoid' }`        |      |
| **Avoid Page**   | `break-inside: avoid-page`   | `break-inside-avoid-page`   | `{ breakInside: 'avoid-page' }`   |      |
| **Avoid Column** | `break-inside: avoid-column` | `break-inside-avoid-column` | `{ breakInside: 'avoid-column' }` |      |

## Box Decoration Break

Controlling box decoration fragments.

| Concept   | CSS Rule                      | Tailwind v4 Class      | `sz` Prop (Object Syntax)    | Note                            |
| :-------- | :---------------------------- | :--------------------- | :--------------------------- | :------------------------------ |
| **Slice** | `box-decoration-break: slice` | `box-decoration-slice` | `{ boxDecoration: 'slice' }` | **Sugar**: Shortened prop name. |
| **Clone** | `box-decoration-break: clone` | `box-decoration-clone` | `{ boxDecoration: 'clone' }` |                                 |

## Box Sizing

Controlling box model sizing.

| Concept         | CSS Rule                  | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :-------------- | :------------------------ | :---------------- | :------------------------ | :--- |
| **Border Box**  | `box-sizing: border-box`  | `box-border`      | `{ box: 'border' }`       |      |
| **Content Box** | `box-sizing: content-box` | `box-content`     | `{ box: 'content' }`      |      |

## Display

Controlling display box type.

| Concept                | CSS Rule                      | Tailwind v4 Class    | `sz` Prop (Canonical)               | `sz` Prop (Boolean Sugar)    |
| :--------------------- | :---------------------------- | :------------------- | :---------------------------------- | :--------------------------- |
| **Block**              | `display: block`              | `block`              | `{ display: 'block' }`              | `{ block: true }`            |
| **Inline Block**       | `display: inline-block`       | `inline-block`       | `{ display: 'inline-block' }`       | `{ inlineBlock: true }`      |
| **Inline**             | `display: inline`             | `inline`             | `{ display: 'inline' }`             | `{ inline: true }`           |
| **Flex**               | `display: flex`               | `flex`               | `{ display: 'flex' }`               | `{ flex: true }`             |
| **Inline Flex**        | `display: inline-flex`        | `inline-flex`        | `{ display: 'inline-flex' }`        | `{ inlineFlex: true }`       |
| **Grid**               | `display: grid`               | `grid`               | `{ display: 'grid' }`               | `{ grid: true }`             |
| **Inline Grid**        | `display: inline-grid`        | `inline-grid`        | `{ display: 'inline-grid' }`        | `{ inlineGrid: true }`       |
| **Contents**           | `display: contents`           | `contents`           | `{ display: 'contents' }`           | `{ contents: true }`         |
| **Table**              | `display: table`              | `table`              | `{ display: 'table' }`              | `{ table: true }`            |
| **Inline Table**       | `display: inline-table`       | `inline-table`       | `{ display: 'inline-table' }`       | `{ inlineTable: true }`      |
| **Table Caption**      | `display: table-caption`      | `table-caption`      | `{ display: 'table-caption' }`      | `{ tableCaption: true }`     |
| **Table Cell**         | `display: table-cell`         | `table-cell`         | `{ display: 'table-cell' }`         | `{ tableCell: true }`        |
| **Table Column**       | `display: table-column`       | `table-column`       | `{ display: 'table-column' }`       | `{ tableColumn: true }`      |
| **Table Column Group** | `display: table-column-group` | `table-column-group` | `{ display: 'table-column-group' }` | `{ tableColumnGroup: true }` |
| **Table Footer Group** | `display: table-footer-group` | `table-footer-group` | `{ display: 'table-footer-group' }` | `{ tableFooterGroup: true }` |
| **Table Header Group** | `display: table-header-group` | `table-header-group` | `{ display: 'table-header-group' }` | `{ tableHeaderGroup: true }` |
| **Table Row Group**    | `display: table-row-group`    | `table-row-group`    | `{ display: 'table-row-group' }`    | `{ tableRowGroup: true }`    |
| **Table Row**          | `display: table-row`          | `table-row`          | `{ display: 'table-row' }`          | `{ tableRow: true }`         |
| **Flow Root**          | `display: flow-root`          | `flow-root`          | `{ display: 'flow-root' }`          | `{ flowRoot: true }`         |
| **List Item**          | `display: list-item`          | `list-item`          | `{ display: 'list-item' }`          | `{ listItem: true }`         |
| **Hidden**             | `display: none`               | `hidden`             | `{ display: 'none' }`               | `{ hidden: true }`           |
| **Screen Reader Only** | `position: absolute; ...`     | `sr-only`            | N/A                                 | `{ srOnly: true }`           |
| **Not Screen Reader**  | `position: static; ...`       | `not-sr-only`        | N/A                                 | `{ notSrOnly: true }`        |

## Floats

Controlling floated elements.

| Concept   | CSS Rule              | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :-------- | :-------------------- | :---------------- | :------------------------ | :--- |
| **Right** | `float: right`        | `float-right`     | `{ float: 'right' }`      |      |
| **Left**  | `float: left`         | `float-left`      | `{ float: 'left' }`       |      |
| **Start** | `float: inline-start` | `float-start`     | `{ float: 'start' }`      |      |
| **End**   | `float: inline-end`   | `float-end`       | `{ float: 'end' }`        |      |
| **None**  | `float: none`         | `float-none`      | `{ float: 'none' }`       |      |

## Clear

Controlling flow relative to floats.

| Concept   | CSS Rule              | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :-------- | :-------------------- | :---------------- | :------------------------ | :--- |
| **Left**  | `clear: left`         | `clear-left`      | `{ clear: 'left' }`       |      |
| **Right** | `clear: right`        | `clear-right`     | `{ clear: 'right' }`      |      |
| **Both**  | `clear: both`         | `clear-both`      | `{ clear: 'both' }`       |      |
| **None**  | `clear: none`         | `clear-none`      | `{ clear: 'none' }`       |      |
| **Start** | `clear: inline-start` | `clear-start`     | `{ clear: 'start' }`      |      |
| **End**   | `clear: inline-end`   | `clear-end`       | `{ clear: 'end' }`        |      |

## Isolation

Controlling stacking contexts.

| Concept     | CSS Rule             | Tailwind v4 Class | `sz` Prop (Object Syntax)  | Note                            |
| :---------- | :------------------- | :---------------- | :------------------------- | :------------------------------ |
| **Isolate** | `isolation: isolate` | `isolate`         | `{ isolation: 'isolate' }` | **Sugar**: `{ isolate: true }`. |
| **Auto**    | `isolation: auto`    | `isolation-auto`  | `{ isolation: 'auto' }`    |                                 |

## Object Fit

Controlling replaced element content.

| Concept        | CSS Rule                 | Tailwind v4 Class   | `sz` Prop (Object Syntax)     | Note |
| :------------- | :----------------------- | :------------------ | :---------------------------- | :--- |
| **Contain**    | `object-fit: contain`    | `object-contain`    | `{ objectFit: 'contain' }`    |      |
| **Cover**      | `object-fit: cover`      | `object-cover`      | `{ objectFit: 'cover' }`      |      |
| **Fill**       | `object-fit: fill`       | `object-fill`       | `{ objectFit: 'fill' }`       |      |
| **None**       | `object-fit: none`       | `object-none`       | `{ objectFit: 'none' }`       |      |
| **Scale Down** | `object-fit: scale-down` | `object-scale-down` | `{ objectFit: 'scale-down' }` |      |

## Object Position

Controlling replaced element alignment.

| Concept          | CSS Rule                        | Tailwind v4 Class     | `sz` Prop (Object Syntax)       | Note                          |
| :--------------- | :------------------------------ | :-------------------- | :------------------------------ | :---------------------------- |
| **Top Left**     | `object-position: top-left`     | `object-top-left`     | `{ objectPos: 'top-left' }`     |                               |
| **Top**          | `object-position: top`          | `object-top`          | `{ objectPos: 'top' }`          |                               |
| **Top Right**    | `object-position: top-right`    | `object-top-right`    | `{ objectPos: 'top-right' }`    |                               |
| **Left**         | `object-position: left`         | `object-left`         | `{ objectPos: 'left' }`         |                               |
| **Center**       | `object-position: center`       | `object-center`       | `{ objectPos: 'center' }`       |                               |
| **Right**        | `object-position: right`        | `object-right`        | `{ objectPos: 'right' }`        |                               |
| **Bottom Left**  | `object-position: bottom-left`  | `object-bottom-left`  | `{ objectPos: 'bottom-left' }`  |                               |
| **Bottom**       | `object-position: bottom`       | `object-bottom`       | `{ objectPos: 'bottom' }`       |                               |
| **Right Bottom** | `object-position: bottom-right` | `object-bottom-right` | `{ objectPos: 'bottom-right' }` |                               |
| **Arbitrary**    | `object-position: 50% 50%`      | `object-[50%_50%]`    | `{ objectPos: '50% 50%' }`      |                               |
| **CSS Variable** | `object-position: var(--pos)`   | `object-(--pos)`      | `{ objectPos: '--pos' }`        | **Sugar**: Auto-detects `--`. |

## Overflow

Controlling content overflow.

| Concept       | CSS Rule              | Tailwind v4 Class    | `sz` Prop (Object Syntax)  | Note |
| :------------ | :-------------------- | :------------------- | :------------------------- | :--- |
| **Auto**      | `overflow: auto`      | `overflow-auto`      | `{ overflow: 'auto' }`     |      |
| **Hidden**    | `overflow: hidden`    | `overflow-hidden`    | `{ overflow: 'hidden' }`   |      |
| **Clip**      | `overflow: clip`      | `overflow-clip`      | `{ overflow: 'clip' }`     |      |
| **Visible**   | `overflow: visible`   | `overflow-visible`   | `{ overflow: 'visible' }`  |      |
| **Scroll**    | `overflow: scroll`    | `overflow-scroll`    | `{ overflow: 'scroll' }`   |      |
| **X Auto**    | `overflow-x: auto`    | `overflow-x-auto`    | `{ overflowX: 'auto' }`    |      |
| **X Hidden**  | `overflow-x: hidden`  | `overflow-x-hidden`  | `{ overflowX: 'hidden' }`  |      |
| **X Clip**    | `overflow-x: clip`    | `overflow-x-clip`    | `{ overflowX: 'clip' }`    |      |
| **X Visible** | `overflow-x: visible` | `overflow-x-visible` | `{ overflowX: 'visible' }` |      |
| **X Scroll**  | `overflow-x: scroll`  | `overflow-x-scroll`  | `{ overflowX: 'scroll' }`  |      |
| **Y Auto**    | `overflow-y: auto`    | `overflow-y-auto`    | `{ overflowY: 'auto' }`    |      |
| **Y Hidden**  | `overflow-y: hidden`  | `overflow-y-hidden`  | `{ overflowY: 'hidden' }`  |      |
| **Y Clip**    | `overflow-y: clip`    | `overflow-y-clip`    | `{ overflowY: 'clip' }`    |      |
| **Y Visible** | `overflow-y: visible` | `overflow-y-visible` | `{ overflowY: 'visible' }` |      |
| **Y Scroll**  | `overflow-y: scroll`  | `overflow-y-scroll`  | `{ overflowY: 'scroll' }`  |      |

## Overscroll Behavior

Controlling scroll chaining.

| Concept       | CSS Rule                         | Tailwind v4 Class      | `sz` Prop (Object Syntax)    | Note |
| :------------ | :------------------------------- | :--------------------- | :--------------------------- | :--- |
| **Auto**      | `overscroll-behavior: auto`      | `overscroll-auto`      | `{ overscroll: 'auto' }`     |      |
| **Contain**   | `overscroll-behavior: contain`   | `overscroll-contain`   | `{ overscroll: 'contain' }`  |      |
| **None**      | `overscroll-behavior: none`      | `overscroll-none`      | `{ overscroll: 'none' }`     |      |
| **X Auto**    | `overscroll-behavior-x: auto`    | `overscroll-x-auto`    | `{ overscrollX: 'auto' }`    |      |
| **X Contain** | `overscroll-behavior-x: contain` | `overscroll-x-contain` | `{ overscrollX: 'contain' }` |      |
| **X None**    | `overscroll-behavior-x: none`    | `overscroll-x-none`    | `{ overscrollX: 'none' }`    |      |
| **Y Auto**    | `overscroll-behavior-y: auto`    | `overscroll-y-auto`    | `{ overscrollY: 'auto' }`    |      |
| **Y Contain** | `overscroll-behavior-y: contain` | `overscroll-y-contain` | `{ overscrollY: 'contain' }` |      |
| **Y None**    | `overscroll-behavior-y: none`    | `overscroll-y-none`    | `{ overscrollY: 'none' }`    |      |

## Position

Controlling positioning.

| Concept      | CSS Rule             | Tailwind v4 Class | `sz` Prop (Canonical)      | `sz` Prop (Boolean Sugar) |
| :----------- | :------------------- | :---------------- | :------------------------- | :------------------------ |
| **Static**   | `position: static`   | `static`          | `{ position: 'static' }`   | `{ static: true }`        |
| **Fixed**    | `position: fixed`    | `fixed`           | `{ position: 'fixed' }`    | `{ fixed: true }`         |
| **Absolute** | `position: absolute` | `absolute`        | `{ position: 'absolute' }` | `{ absolute: true }`      |
| **Relative** | `position: relative` | `relative`        | `{ position: 'relative' }` | `{ relative: true }`      |
| **Sticky**   | `position: sticky`   | `sticky`          | `{ position: 'sticky' }`   | `{ sticky: true }`        |

## Top / Right / Bottom / Left (Placement)

Positioning mapped elements.

| Concept                     | CSS Rule                                          | Tailwind v4 Class   | `sz` Prop (Object Syntax)  | Note                                                                             |
| :-------------------------- | :------------------------------------------------ | :------------------ | :------------------------- | :------------------------------------------------------------------------------- |
| **Inset**                   | `inset: calc(var(--spacing) * <number>)`          | `inset-<number>`    | `{ inset: <number> }`      | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Inset Negative**          | `inset: calc(var(--spacing) * -<number>)`         | `-inset-<number>`   | `{ inset: -<number> }`     | v4: accept any negative integer or 0.5-step decimal bare.                        |
| **Inset Fraction**          | `inset: calc(<fraction> * 100%)`                  | `inset-<fraction>`  | `{ inset: '<fraction>' }`  | v4: accept any integer/integer fraction (string) bare.                           |
| **Inset Fraction Negative** | `inset: calc(<fraction> * -100%)`                 | `-inset-<fraction>` | `{ inset: '-<fraction>' }` | v4: accept any negative integer/integer fraction (string) bare.                  |
| **Inset Pixel**             | `inset: 1px`                                      | `inset-px`          | `{ inset: 'px' }`          |                                                                                  |
| **Inset Pixel Negative**    | `inset: -1px`                                     | `-inset-px`         | `{ inset: '-px' }`         |                                                                                  |
| **Inset Full**              | `inset: 100%`                                     | `inset-full`        | `{ inset: 'full' }`        |                                                                                  |
| **Inset Full Negative**     | `inset: -100%`                                    | `-inset-full`       | `{ inset: '-full' }`       |                                                                                  |
| **Inset Auto**              | `inset: auto`                                     | `inset-auto`        | `{ inset: 'auto' }`        |                                                                                  |
| **Inset Arbitrary**         | `inset: 27px`                                     | `inset-[27px]`      | `{ inset: '27px' }`        |                                                                                  |
| **Inset CSS Variable**      | `inset: var(--inset)`                             | `inset-(--inset)`   | `{ inset: '--inset' }`     |                                                                                  |
| **Inset X**                 | `inset-inline: calc(var(--spacing) * <number>);`  | `inset-x-<number>`  | `{ insetX: <number> }`     | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Inset X Negative**        | `inset-inline: calc(var(--spacing) * -<number>);` | `-inset-x-<number>` | `{ insetX: -<number> }`    | v4: accept any integer or 0.5-step decimal bare.                                 |

| **Inset Y** | `inset-block: calc(var(--spacing) * <number>);` | `inset-y-<number>` | `{ insetY: <number> }` | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |

| **Start (L)** | `inset-inline-start: ...` | `inset-s-<number>` | `{ start: <number> }` | v4.2: emits `inset-s-*` (was `start-*`, same CSS, deprecated in TW v4.2). |
| **End (R)** | `inset-inline-end: ...` | `inset-e-<number>` | `{ end: <number> }` | v4.2: emits `inset-e-*` (was `end-*`, same CSS, deprecated in TW v4.2). |
| **Inset S** | `inset-inline-start: ...` | `inset-s-<number>` | `{ insetS: <number> }` | v4.2: explicit camelCase alias for `start`. |
| **Inset E** | `inset-inline-end: ...` | `inset-e-<number>` | `{ insetE: <number> }` | v4.2: explicit camelCase alias for `end`. |
| **Inset Block Start** | `inset-block-start: ...` | `inset-bs-<number>` | `{ insetBs: <number> }` | v4.2: logical block-start inset. |
| **Inset Block End** | `inset-block-end: ...` | `inset-be-<number>` | `{ insetBe: <number> }` | v4.2: logical block-end inset. |

| **Top** | `top: calc(var(--spacing) * <number>)` | `top-<number>` | `{ top: <number> }` | |
| **Top Negative** | `top: calc(var(--spacing) * -<number>)` | `-top-<number>` | `{ top: -<number> }` | |
| **Top Arbitrary** | `top: -1px` | `top-[-1px]` | `{ top: '-1px' }` | No `[]` needed in sz — compiler auto-wraps. |
| **Top CSS Variable** | `top: var(--offset)` | `top-(--offset)` | `{ top: '--offset' }` | |

| **Right** | `right: calc(var(--spacing) * <number>)` | `right-<number>` | `{ right: <number> }` | |
| **Right Negative** | `right: calc(var(--spacing) * -<number>)` | `-right-<number>` | `{ right: -<number> }` | |
| **Right Arbitrary** | `right: -1px` | `right-[-1px]` | `{ right: '-1px' }` | No `[]` needed in sz — compiler auto-wraps. |
| **Right CSS Variable** | `right: var(--offset)` | `right-(--offset)` | `{ right: '--offset' }` | |

| **Bottom** | `bottom: calc(var(--spacing) * <number>)` | `bottom-<number>` | `{ bottom: <number> }` | |
| **Bottom Negative** | `bottom: calc(var(--spacing) * -<number>)` | `-bottom-<number>` | `{ bottom: -<number> }` | |
| **Bottom Arbitrary** | `bottom: -1px` | `bottom-[-1px]` | `{ bottom: '-1px' }` | No `[]` needed in sz — compiler auto-wraps. |
| **Bottom CSS Variable** | `bottom: var(--offset)` | `bottom-(--offset)` | `{ bottom: '--offset' }` | |

| **Left** | `left: calc(var(--spacing) * <number>)` | `left-<number>` | `{ left: <number> }` | |
| **Left Negative** | `left: calc(var(--spacing) * -<number>)` | `-left-<number>` | `{ left: -<number> }` | |
| **Left Arbitrary** | `left: -1px` | `left-[-1px]` | `{ left: '-1px' }` | No `[]` needed in sz — compiler auto-wraps. |
| **Left CSS Variable** | `left: var(--offset)` | `left-(--offset)` | `{ left: '--offset' }` | |

## Visibility

Controlling visibility without layout change.

| Concept       | CSS Rule               | Tailwind v4 Class | `sz` Prop (Canonical)        | `sz` Prop (Boolean)   |
| :------------ | :--------------------- | :---------------- | :--------------------------- | :-------------------- |
| **Visible**   | `visibility: visible`  | `visible`         | `{ visibility: 'visible' }`  | `{ visible: true }`   |
| **Invisible** | `visibility: hidden`   | `invisible`       | `{ visibility: 'hidden' }`   | `{ invisible: true }` |
| **Collapse**  | `visibility: collapse` | `collapse`        | `{ visibility: 'collapse' }` | `{ collapse: true }`  |

## Z-Index

Controlling stack order.

| Concept          | CSS Rule                          | Tailwind v4 Class            | `sz` Prop (Object Syntax)         | Note                                                        |
| :--------------- | :-------------------------------- | :--------------------------- | :-------------------------------- | :---------------------------------------------------------- |
| **Index**        | `z-index: <number>`               | `z-<number>`                 | `{ z: <number> }`                 | v4: fully dynamic, no static scale, accept any integer bare |
| **Negative**     | `z-index: -<number>`              | `-z-<number>`                | `{ z: -<number> }`                | v4: fully dynamic, no static scale, accept any integer bare |
| **Auto**         | `z-index: auto`                   | `z-auto`                     | `{ z: 'auto' }`                   |                                                             |
| **Arbitrary**    | `z-index: calc(var(--index) + 1)` | `z-[calc(var(--index)_+_1)]` | `{ z: 'calc(var(--index) + 1)' }` |                                                             |
| **CSS Variable** | `z-index: var(--my-z)`            | `z-(--my-z)`                 | `{ z: '--my-z' }`                 |                                                             |


# Misc Utilities

## SVG

Utilities for controlling the appearance of SVG elements.

### Fill

Utilities for controlling the fill color of SVG elements.

| Concept       | CSS Rule              | Tailwind v4 Class  | `sz` Prop (Object Syntax) | Note |
| :------------ | :-------------------- | :----------------- | :------------------------ | :--- |
| **Color**     | `fill: ...`           | `fill-red-500`     | `{ fill: 'red-500' }`     |      |
| **None**      | `fill: none;`         | `fill-none`        | `{ fill: 'none' }`        |      |
| **Pick**      | `fill: inherit;`      | `fill-inherit`     | `{ fill: 'inherit' }`     |      |
| **Pick**      | `fill: currentColor;` | `fill-current`     | `{ fill: 'current' }`     |      |
| **Pick**      | `fill: transparent;`  | `fill-transparent` | `{ fill: 'transparent' }` |      |
| **Arbitrary** | `fill: #50d71e`       | `fill-[#50d71e]`   | `{ fill: '#50d71e' }`     |      |
| **Variable**  | `fill: var(--c)`      | `fill-(--c)`       | `{ fill: '--c' }`         |      |

### Stroke

Utilities for controlling the stroke color of SVG elements.

| Concept       | CSS Rule                | Tailwind v4 Class    | `sz` Prop (Object Syntax)   | Note |
| :------------ | :---------------------- | :------------------- | :-------------------------- | :--- |
| **Color**     | `stroke: ...`           | `stroke-red-500`     | `{ stroke: 'red-500' }`     |      |
| **None**      | `stroke: none;`         | `stroke-none`        | `{ stroke: 'none' }`        |      |
| **Pick**      | `stroke: inherit;`      | `stroke-inherit`     | `{ stroke: 'inherit' }`     |      |
| **Pick**      | `stroke: currentColor;` | `stroke-current`     | `{ stroke: 'current' }`     |      |
| **Pick**      | `stroke: transparent;`  | `stroke-transparent` | `{ stroke: 'transparent' }` |      |
| **Arbitrary** | `stroke: #50d71e`       | `stroke-[#50d71e]`   | `{ stroke: '#50d71e' }`     |      |
| **Variable**  | `stroke: var(--c)`      | `stroke-(--c)`       | `{ stroke: '--c' }`         |      |

### Stroke Width

Utilities for controlling the stroke width of SVG elements.

| Concept       | CSS Rule                 | Tailwind v4 Class | `sz` Prop (Object Syntax)   | Note                                                         |
| :------------ | :----------------------- | :---------------- | :-------------------------- | :----------------------------------------------------------- |
| **Scale**     | `stroke-width: <number>` | `stroke-<number>` | `{ strokeWidth: <number> }` | v4: fully dynamic, no static scale, accept any integer bare. |
| **Arbitrary** | `stroke-width: 0.5`      | `stroke-[0.5]`    | `{ strokeWidth: 0.5 }`      | decimal                                                      |
| **Arbitrary** | `stroke-width: 0.5rem`   | `stroke-[0.5rem]` | `{ strokeWidth: '0.5rem' }` | CSS unit                                                     |
| **Variable**  | `stroke-width: var(--w)` | `stroke-(--w)`    | `{ strokeWidth: '--w' }`    | **Sugar**: Auto-detects `--`.                                |

## Accessibility

Utilities for controlling accessibility-related properties.

### Forced Color Adjust

Utilities for controlling whether browsers should automatically adjust element colors in high contrast modes.

| Concept  | CSS Rule                     | Tailwind v4 Class          | `sz` Prop (Object Syntax)       | Note |
| :------- | :--------------------------- | :------------------------- | :------------------------------ | :--- |
| **Auto** | `forced-color-adjust: auto;` | `forced-color-adjust-auto` | `{ forcedColorAdjust: 'auto' }` |      |
| **None** | `forced-color-adjust: none;` | `forced-color-adjust-none` | `{ forcedColorAdjust: 'none' }` |      |

---

## `css: {}` — Arbitrary CSS Escape Hatch

For CSS properties with no `sz` prop or Tailwind utility equivalent.
Each key-value pair in the `css` object generates a Tailwind arbitrary-property class `[prop:value]`.
Keys are camelCase CSS properties; the compiler converts them to kebab-case automatically.
CSS custom properties (`--*`) are passed through unchanged.

**TypeScript:** `css?` is typed as `CSS.Properties & { [cssVar: \`--${string}\`]: string | number }` — full IDE autocomplete and typo protection.

| Concept             | Example `sz` Prop                                 | Output Class                    | Note                           |
| :------------------ | :------------------------------------------------ | :------------------------------ | :----------------------------- |
| **Regular prop**    | `{ css: { writingMode: 'vertical-lr' } }`         | `[writing-mode:vertical-lr]`    | camelCase → kebab-case         |
| **Multi-word**      | `{ css: { touchAction: 'none' } }`                | `[touch-action:none]`           |                                |
| **CSS custom prop** | `{ css: { '--my-color': 'red' } }`                | `[--my-color:red]`              | `--*` passed through unchanged |
| **Inside variant**  | `{ hover: { css: { cursor: 'crosshair' } } }`     | `hover:[cursor:crosshair]`      | works in all variants          |
| **Responsive**      | `{ md: { css: { writingMode: 'vertical-lr' } } }` | `md:[writing-mode:vertical-lr]` |                                |
| **Numeric value**   | `{ css: { zIndex: 10 } }`                         | `[z-index:10]`                  | numbers coerced to string      |

### Notes

- `css: {}` is intentional bypass — no sz-layer mapping applied. `{ css: { backgroundColor: 'red' } }` outputs `[background-color:red]`, not `bg-red`.
- Spaces in values are normalised to underscores: `repeat(3, 1fr)` → `repeat(3,_1fr)`.
- Works inside `dynamic()` at runtime — the same compiler logic handles the `css` key.


# Sizing

Controlling the width and height of elements.

## Width

Controlling the width.

| Concept            | CSS Rule                                 | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                           |
| :----------------- | :--------------------------------------- | :---------------- | :------------------------ | :------------------------------------------------------------- |
| **Spacing**        | `width: calc(var(--spacing) * <number>)` | `w-<number>`      | `{ w: <number> }`         | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Px**             | `width: 1px`                             | `w-px`            | `{ w: 'px' }`             |                                                                |
| **Fraction**       | `width: calc(<int>/<int> * 100%)`        | `w-<int>/<int>`   | `{ w: '<int>/<int>' }`    | v4: any integer/integer fraction works bare                    |
| **Full**           | `width: 100%`                            | `w-full`          | `{ w: 'full' }`           |                                                                |
| **Screen**         | `width: 100vw`                           | `w-screen`        | `{ w: 'screen' }`         |                                                                |
| **Viewport (SVW)** | `width: 100svw`                          | `w-svw`           | `{ w: 'svw' }`            |                                                                |
| **Viewport (LVW)** | `width: 100lvw`                          | `w-lvw`           | `{ w: 'lvw' }`            |                                                                |
| **Viewport (DVW)** | `width: 100dvw`                          | `w-dvw`           | `{ w: 'dvw' }`            |                                                                |
| **Min Content**    | `width: min-content`                     | `w-min`           | `{ w: 'min' }`            |                                                                |
| **Max Content**    | `width: max-content`                     | `w-max`           | `{ w: 'max' }`            |                                                                |
| **Fit Content**    | `width: fit-content`                     | `w-fit`           | `{ w: 'fit' }`            |                                                                |
| **Auto**           | `width: auto`                            | `w-auto`          | `{ w: 'auto' }`           |                                                                |
| **Arbitrary**      | `width: 27px`                            | `w-[27px]`        | `{ w: '27px' }`           |                                                                |
| **CSS Variable**   | `width: var(--w)`                        | `w-(--w)`         | `{ w: '--w' }`            | **Sugar**: Auto-detects `--`.                                  |

## Min Width

Controlling the minimum width.

| Concept          | CSS Rule                                     | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note                                                           |
| :--------------- | :------------------------------------------- | :------------------ | :------------------------ | :------------------------------------------------------------- |
| **Spacing**      | `min-width: calc(var(--spacing) * <number>)` | `min-w-<number>`    | `{ minW: <number> }`      | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Px**           | `min-width: 1px`                             | `min-w-px`          | `{ minW: 'px' }`          |                                                                |
| **Fraction**     | `min-width: calc(<int>/<int> * 100%)`        | `min-w-<int>/<int>` | `{ minW: '<int>/<int>' }` | v4: any integer/integer fraction works bare                    |
| **Full**         | `min-width: 100%`                            | `min-w-full`        | `{ minW: 'full' }`        |                                                                |
| **Min Content**  | `min-width: min-content`                     | `min-w-min`         | `{ minW: 'min' }`         |                                                                |
| **Max Content**  | `min-width: max-content`                     | `min-w-max`         | `{ minW: 'max' }`         |                                                                |
| **Fit Content**  | `min-width: fit-content`                     | `min-w-fit`         | `{ minW: 'fit' }`         |                                                                |
| **Arbitrary**    | `min-width: 3px`                             | `min-w-[3px]`       | `{ minW: '3px' }`         |                                                                |
| **CSS Variable** | `min-width: var(--w)`                        | `min-w-(--w)`       | `{ minW: '--w' }`         | **Sugar**: Auto-detects `--`.                                  |

## Max Width

Controlling the maximum width.

| Concept          | CSS Rule                                     | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note                                                           |
| :--------------- | :------------------------------------------- | :------------------ | :------------------------ | :------------------------------------------------------------- |
| **Spacing**      | `max-width: calc(var(--spacing) * <number>)` | `max-w-<number>`    | `{ maxW: <number> }`      | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Px**           | `max-width: 1px`                             | `max-w-px`          | `{ maxW: 'px' }`          |                                                                |
| **Fraction**     | `max-width: calc(<int>/<int> * 100%)`        | `max-w-<int>/<int>` | `{ maxW: '<int>/<int>' }` | v4: any integer/integer fraction works bare                    |
| **Full**         | `max-width: 100%`                            | `max-w-full`        | `{ maxW: 'full' }`        |                                                                |
| **None**         | `max-width: none`                            | `max-w-none`        | `{ maxW: 'none' }`        |                                                                |
| **Prose**        | `max-width: 65ch`                            | `max-w-prose`       | `{ maxW: 'prose' }`       | Requires `@tailwindcss/typography`.                            |
| **Min Content**  | `max-width: min-content`                     | `max-w-min`         | `{ maxW: 'min' }`         |                                                                |
| **Max Content**  | `max-width: max-content`                     | `max-w-max`         | `{ maxW: 'max' }`         |                                                                |
| **Fit Content**  | `max-width: fit-content`                     | `max-w-fit`         | `{ maxW: 'fit' }`         |                                                                |
| **Arbitrary**    | `max-width: 3px`                             | `max-w-[3px]`       | `{ maxW: '3px' }`         |                                                                |
| **CSS Variable** | `max-width: var(--w)`                        | `max-w-(--w)`       | `{ maxW: '--w' }`         | **Sugar**: Auto-detects `--`.                                  |

### Breakpoints (xs-7xl)

| Concept | CSS Rule           | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------ | :----------------- | :---------------- | :------------------------ | :--- |
| **XS**  | `max-width: 20rem` | `max-w-xs`        | `{ maxW: 'xs' }`          |      |
| **SM**  | `max-width: 24rem` | `max-w-sm`        | `{ maxW: 'sm' }`          |      |
| **MD**  | `max-width: 28rem` | `max-w-md`        | `{ maxW: 'md' }`          |      |
| **LG**  | `max-width: 32rem` | `max-w-lg`        | `{ maxW: 'lg' }`          |      |
| **XL**  | `max-width: 36rem` | `max-w-xl`        | `{ maxW: 'xl' }`          |      |
| **2XL** | `max-width: 42rem` | `max-w-2xl`       | `{ maxW: '2xl' }`         |      |
| **3XL** | `max-width: 48rem` | `max-w-3xl`       | `{ maxW: '3xl' }`         |      |
| **4XL** | `max-width: 56rem` | `max-w-4xl`       | `{ maxW: '4xl' }`         |      |
| **5XL** | `max-width: 64rem` | `max-w-5xl`       | `{ maxW: '5xl' }`         |      |
| **6XL** | `max-width: 72rem` | `max-w-6xl`       | `{ maxW: '6xl' }`         |      |
| **7XL** | `max-width: 80rem` | `max-w-7xl`       | `{ maxW: '7xl' }`         |      |

### Screen Breakpoints

| Max Width Screen SM | `max-width: 640px` | `max-w-screen-sm` | `{ maxW: 'screen-sm' }` |
| Max Width Screen MD | `max-width: 768px` | `max-w-screen-md` | `{ maxW: 'screen-md' }` |
| Max Width Screen LG | `max-width: 1024px` | `max-w-screen-lg` | `{ maxW: 'screen-lg' }` |
| Max Width Screen XL | `max-width: 1280px` | `max-w-screen-xl` | `{ maxW: 'screen-xl' }` |
| Max Width Screen 2XL | `max-width: 1536px` | `max-w-screen-2xl` | `{ maxW: 'screen-2xl' }` |

## Height

Controlling the height.

| Concept            | CSS Rule                                  | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                           |
| :----------------- | :---------------------------------------- | :---------------- | :------------------------ | :------------------------------------------------------------- |
| **Spacing**        | `height: calc(var(--spacing) * <number>)` | `h-<number>`      | `{ h: <number> }`         | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Px**             | `height: 1px`                             | `h-px`            | `{ h: 'px' }`             |                                                                |
| **Fraction**       | `height: calc(<int>/<int> * 100%)`        | `h-<int>/<int>`   | `{ h: '<int>/<int>' }`    | v4: any integer/integer fraction works bare                    |
| **Full**           | `height: 100%`                            | `h-full`          | `{ h: 'full' }`           |                                                                |
| **Screen**         | `height: 100vh`                           | `h-screen`        | `{ h: 'screen' }`         |                                                                |
| **Viewport (SVH)** | `height: 100svh`                          | `h-svh`           | `{ h: 'svh' }`            |                                                                |
| **Viewport (LVH)** | `height: 100lvh`                          | `h-lvh`           | `{ h: 'lvh' }`            |                                                                |
| **Viewport (DVH)** | `height: 100dvh`                          | `h-dvh`           | `{ h: 'dvh' }`            |                                                                |
| **Min Content**    | `height: min-content`                     | `h-min`           | `{ h: 'min' }`            |                                                                |
| **Max Content**    | `height: max-content`                     | `h-max`           | `{ h: 'max' }`            |                                                                |
| **Fit Content**    | `height: fit-content`                     | `h-fit`           | `{ h: 'fit' }`            |                                                                |
| **Auto**           | `height: auto`                            | `h-auto`          | `{ h: 'auto' }`           |                                                                |
| **Arbitrary**      | `height: 3px`                             | `h-[3px]`         | `{ h: '3px' }`            |                                                                |
| **CSS Variable**   | `height: var(--h)`                        | `h-(--h)`         | `{ h: '--h' }`            | **Sugar**: Auto-detects `--`.                                  |

## Min Height

Controlling the minimum height.

| Concept            | CSS Rule                                      | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note                                                           |
| :----------------- | :-------------------------------------------- | :------------------ | :------------------------ | :------------------------------------------------------------- |
| **Spacing**        | `min-height: calc(var(--spacing) * <number>)` | `min-h-<number>`    | `{ minH: <number> }`      | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Px**             | `min-height: 1px`                             | `min-h-px`          | `{ minH: 'px' }`          |                                                                |
| **Fraction**       | `min-height: calc(<int>/<int> * 100%)`        | `min-h-<int>/<int>` | `{ minH: '<int>/<int>' }` | v4: any integer/integer fraction works bare                    |
| **Full**           | `min-height: 100%`                            | `min-h-full`        | `{ minH: 'full' }`        |                                                                |
| **Screen**         | `min-height: 100vh`                           | `min-h-screen`      | `{ minH: 'screen' }`      |                                                                |
| **Viewport (SVH)** | `min-height: 100svh`                          | `min-h-svh`         | `{ minH: 'svh' }`         |                                                                |
| **Viewport (LVH)** | `min-height: 100lvh`                          | `min-h-lvh`         | `{ minH: 'lvh' }`         |                                                                |
| **Viewport (DVH)** | `min-height: 100dvh`                          | `min-h-dvh`         | `{ minH: 'dvh' }`         |                                                                |
| **Min Content**    | `min-height: min-content`                     | `min-h-min`         | `{ minH: 'min' }`         |                                                                |
| **Max Content**    | `min-height: max-content`                     | `min-h-max`         | `{ minH: 'max' }`         |                                                                |
| **Fit Content**    | `min-height: fit-content`                     | `min-h-fit`         | `{ minH: 'fit' }`         |                                                                |
| **Arbitrary**      | `min-height: 3px`                             | `min-h-[3px]`       | `{ minH: '3px' }`         |                                                                |
| **CSS Variable**   | `min-height: var(--h)`                        | `min-h-(--h)`       | `{ minH: '--h' }`         | **Sugar**: Auto-detects `--`.                                  |

## Max Height

Controlling the maximum height.

| Concept            | CSS Rule                                      | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note                                                           |
| :----------------- | :-------------------------------------------- | :------------------ | :------------------------ | :------------------------------------------------------------- |
| **Spacing**        | `max-height: calc(var(--spacing) * <number>)` | `max-h-<number>`    | `{ maxH: <number> }`      | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Px**             | `max-height: 1px`                             | `max-h-px`          | `{ maxH: 'px' }`          |                                                                |
| **Fraction**       | `max-height: calc(<int>/<int> * 100%)`        | `max-h-<int>/<int>` | `{ maxH: '<int>/<int>' }` | v4: any integer/integer fraction works bare                    |
| **Full**           | `max-height: 100%`                            | `max-h-full`        | `{ maxH: 'full' }`        |                                                                |
| **Screen**         | `max-height: 100vh`                           | `max-h-screen`      | `{ maxH: 'screen' }`      |                                                                |
| **Viewport (SVH)** | `max-height: 100svh`                          | `max-h-svh`         | `{ maxH: 'svh' }`         |                                                                |
| **Viewport (LVH)** | `max-height: 100lvh`                          | `max-h-lvh`         | `{ maxH: 'lvh' }`         |                                                                |
| **Viewport (DVH)** | `max-height: 100dvh`                          | `max-h-dvh`         | `{ maxH: 'dvh' }`         |                                                                |
| **Min Content**    | `max-height: min-content`                     | `max-h-min`         | `{ maxH: 'min' }`         |                                                                |
| **Max Content**    | `max-height: max-content`                     | `max-h-max`         | `{ maxH: 'max' }`         |                                                                |
| **Fit Content**    | `max-height: fit-content`                     | `max-h-fit`         | `{ maxH: 'fit' }`         |                                                                |
| **Arbitrary**      | `max-height: 3px`                             | `max-h-[3px]`       | `{ maxH: '3px' }`         |                                                                |
| **CSS Variable**   | `max-height: var(--h)`                        | `max-h-(--h)`       | `{ maxH: '--h' }`         | **Sugar**: Auto-detects `--`.                                  |

## Size

Utilities for setting both the width and height of an element.

| Concept          | CSS Rule                                          | Tailwind v4 Class  | `sz` Prop (Object Syntax) | Note                                                           |
| :--------------- | :------------------------------------------------ | :----------------- | :------------------------ | :------------------------------------------------------------- |
| **Spacing**      | `width & height: calc(var(--spacing) * <number>)` | `size-<number>`    | `{ size: <number> }`      | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Px**           | `width & height: 1px`                             | `size-px`          | `{ size: 'px' }`          |                                                                |
| **Fraction**     | `width & height: calc(<int>/<int> * 100%)`        | `size-<int>/<int>` | `{ size: '<int>/<int>' }` | v4: any integer/integer fraction works bare                    |
| **Full**         | `width: 100%; height: 100%`                       | `size-full`        | `{ size: 'full' }`        |                                                                |
| **Min Content**  | `width: min-content; height: min-content`         | `size-min`         | `{ size: 'min' }`         |                                                                |
| **Max Content**  | `width: max-content; height: max-content`         | `size-max`         | `{ size: 'max' }`         |                                                                |
| **Fit Content**  | `width: fit-content; height: fit-content`         | `size-fit`         | `{ size: 'fit' }`         |                                                                |
| **Arbitrary**    | `width: 3px; height: 3px`                         | `size-[3px]`       | `{ size: '3px' }`         |                                                                |
| **CSS Variable** | `width: var(--s); height: var(--s)`               | `size-(--s)`       | `{ size: '--s' }`         | **Sugar**: Auto-detects `--`.                                  |

## Block Size (Logical Height)

Controlling block-size (logical equivalent of height). Added in Tailwind v4.2.

| Concept            | CSS Rule                                      | Tailwind v4 Class    | `sz` Prop (Object Syntax)    | Note                          |
| :----------------- | :-------------------------------------------- | :------------------- | :--------------------------- | :---------------------------- |
| **Spacing**        | `block-size: calc(var(--spacing) * <number>)` | `block-<number>`     | `{ blockSize: <number> }`    |                               |
| **Full**           | `block-size: 100%`                            | `block-full`         | `{ blockSize: 'full' }`      |                               |
| **Screen**         | `block-size: 100vh`                           | `block-screen`       | `{ blockSize: 'screen' }`    |                               |
| **Min Content**    | `block-size: min-content`                     | `block-min`          | `{ blockSize: 'min' }`       |                               |
| **Max Content**    | `block-size: max-content`                     | `block-max`          | `{ blockSize: 'max' }`       |                               |
| **Fit Content**    | `block-size: fit-content`                     | `block-fit`          | `{ blockSize: 'fit' }`       |                               |
| **Auto**           | `block-size: auto`                            | `block-auto`         | `{ blockSize: 'auto' }`      |                               |
| **Arbitrary**      | `block-size: 27px`                            | `block-[27px]`       | `{ blockSize: '27px' }`      |                               |
| **Min Block Size** | `min-block-size: calc(var(--spacing) * N)`    | `min-block-<number>` | `{ minBlockSize: <number> }` |                               |
| **Max Block Size** | `max-block-size: calc(var(--spacing) * N)`    | `max-block-<number>` | `{ maxBlockSize: <number> }` |                               |
| **CSS Variable**   | `block-size: var(--bs)`                       | `block-(--bs)`       | `{ blockSize: '--bs' }`      | **Sugar**: Auto-detects `--`. |

## Inline Size (Logical Width)

Controlling inline-size (logical equivalent of width). Added in Tailwind v4.2.

| Concept             | CSS Rule                                       | Tailwind v4 Class     | `sz` Prop (Object Syntax)     | Note                          |
| :------------------ | :--------------------------------------------- | :-------------------- | :---------------------------- | :---------------------------- |
| **Spacing**         | `inline-size: calc(var(--spacing) * <number>)` | `inline-<number>`     | `{ inlineSize: <number> }`    |                               |
| **Full**            | `inline-size: 100%`                            | `inline-full`         | `{ inlineSize: 'full' }`      |                               |
| **Min Content**     | `inline-size: min-content`                     | `inline-min`          | `{ inlineSize: 'min' }`       |                               |
| **Max Content**     | `inline-size: max-content`                     | `inline-max`          | `{ inlineSize: 'max' }`       |                               |
| **Fit Content**     | `inline-size: fit-content`                     | `inline-fit`          | `{ inlineSize: 'fit' }`       |                               |
| **Auto**            | `inline-size: auto`                            | `inline-auto`         | `{ inlineSize: 'auto' }`      |                               |
| **Arbitrary**       | `inline-size: 27px`                            | `inline-[27px]`       | `{ inlineSize: '27px' }`      |                               |
| **Min Inline Size** | `min-inline-size: calc(var(--spacing) * N)`    | `min-inline-<number>` | `{ minInlineSize: <number> }` |                               |
| **Max Inline Size** | `max-inline-size: calc(var(--spacing) * N)`    | `max-inline-<number>` | `{ maxInlineSize: <number> }` |                               |
| **CSS Variable**    | `inline-size: var(--is)`                       | `inline-(--is)`       | `{ inlineSize: '--is' }`      | **Sugar**: Auto-detects `--`. |

## Container

Component-like utility for fixing an element's width to the current breakpoint.

| Concept    | CSS Rule                                        | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                    |
| :--------- | :---------------------------------------------- | :---------------- | :------------------------ | :------------------------------------------------------ |
| **Enable** | `width: 100%; max-width: 100% (at breakpoints)` | `container`       | `{ container: true }`     | **Top-level prop**. Better DX than `maxW: 'container'`. |

## Typography Plugin (Prose)

Handling `@tailwindcss/typography` classes.

| Concept          | CSS Rule                          | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                                  |
| :--------------- | :-------------------------------- | :---------------- | :------------------------ | :-------------------------------------------------------------------- |
| **Enable Prose** | `color: inherit; max-width: 65ch` | `prose`           | `{ prose: true }`         | **Standard mapping**. Output class regardless of plugin installation. |
| **Size**         | `font-size: 1.125rem`             | `prose-lg`        | `{ prose: 'lg' }`         |                                                                       |
| **Invert**       | `--tw-prose-body: (varies)`       | `prose-invert`    | `{ proseInvert: true }`   |                                                                       |
| **Gray (Color)** | `--tw-prose-body: (varies)`       | `prose-gray`      | `{ prose: 'gray' }`       |                                                                       |


# Spacing

Controlling padding, margin, and space between elements.

## Padding

Controlling inner spacing.

| Concept             | CSS Rule                                                | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                                             |
| :------------------ | :------------------------------------------------------ | :---------------- | :------------------------ | :------------------------------------------------------------------------------- |
| **Px**              | `padding: 1px`                                          | `p-px`            | `{ p: 'px' }`             |                                                                                  |
| **All Sides**       | `padding: calc(var(--spacing) * <number>)`              | `p-<number>`      | `{ p: <number> }`         | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **X Axis**          | `padding-inline: calc(var(--spacing) * <number>)`       | `px-<number>`     | `{ px: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Y Axis**          | `padding-block: calc(var(--spacing) * <number>)`        | `py-<number>`     | `{ py: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Top**             | `padding-top: calc(var(--spacing) * <number>)`          | `pt-<number>`     | `{ pt: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Right**           | `padding-right: calc(var(--spacing) * <number>)`        | `pr-<number>`     | `{ pr: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Bottom**          | `padding-bottom: calc(var(--spacing) * <number>)`       | `pb-<number>`     | `{ pb: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Left**            | `padding-left: calc(var(--spacing) * <number>)`         | `pl-<number>`     | `{ pl: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Start (Logical)** | `padding-inline-start: calc(var(--spacing) * <number>)` | `ps-<number>`     | `{ ps: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **End (Logical)**   | `padding-inline-end: calc(var(--spacing) * <number>)`   | `pe-<number>`     | `{ pe: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Block Start**     | `padding-block-start: calc(var(--spacing) * <number>)`  | `pbs-<number>`    | `{ pbs: <number> }`       | v4.2: logical block-direction.                                                   |
| **Block End**       | `padding-block-end: calc(var(--spacing) * <number>)`    | `pbe-<number>`    | `{ pbe: <number> }`       | v4.2: logical block-direction.                                                   |
| **Arbitrary**       | `padding: 5px`                                          | `p-[5px]`         | `{ p: '5px' }`            |                                                                                  |
| **CSS Variable**    | `padding: var(--p)`                                     | `p-(--p)`         | `{ p: '--p' }`            | **Sugar**: Auto-detects `--`.                                                    |

## Margin

Controlling outer spacing.

| Concept                | CSS Rule                                               | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note                                                                             |
| :--------------------- | :----------------------------------------------------- | :---------------- | :------------------------ | :------------------------------------------------------------------------------- |
| **Px**                 | `margin: 1px`                                          | `m-px`            | `{ m: 'px' }`             |                                                                                  |
| **Px Negative**        | `margin: -1px`                                         | `-m-px`           | `{ m: '-px' }`            |                                                                                  |
| **All Sides**          | `margin: calc(var(--spacing) * <number>)`              | `m-<number>`      | `{ m: <number> }`         | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **All Sides Negative** | `margin: calc(var(--spacing) * -<number>)`             | `-m-<number>`     | `{ m: -<number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **X Axis**             | `margin-inline: calc(var(--spacing) * <number>)`       | `mx-<number>`     | `{ mx: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Y Axis**             | `margin-block: calc(var(--spacing) * <number>)`        | `my-<number>`     | `{ my: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Top**                | `margin-top: calc(var(--spacing) * <number>)`          | `mt-<number>`     | `{ mt: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Right**              | `margin-right: calc(var(--spacing) * <number>)`        | `mr-<number>`     | `{ mr: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Bottom**             | `margin-bottom: calc(var(--spacing) * <number>)`       | `mb-<number>`     | `{ mb: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Left**               | `margin-left: calc(var(--spacing) * <number>)`         | `ml-<number>`     | `{ ml: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Start (Logical)**    | `margin-inline-start: calc(var(--spacing) * <number>)` | `ms-<number>`     | `{ ms: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **End (Logical)**      | `margin-inline-end: calc(var(--spacing) * <number>)`   | `me-<number>`     | `{ me: <number> }`        | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Block Start**        | `margin-block-start: calc(var(--spacing) * <number>)`  | `mbs-<number>`    | `{ mbs: <number> }`       | v4.2: logical block-direction. Supports negative.                                |
| **Block End**          | `margin-block-end: calc(var(--spacing) * <number>)`    | `mbe-<number>`    | `{ mbe: <number> }`       | v4.2: logical block-direction. Supports negative.                                |
| **Negative**           | `margin-top: calc(var(--spacing) * -<number>)`         | `-mt-<number>`    | `{ mt: -<number> }`       | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Auto**               | `margin: auto`                                         | `m-auto`          | `{ m: 'auto' }`           |                                                                                  |
| **Arbitrary**          | `margin: 5px`                                          | `m-[5px]`         | `{ m: '5px' }`            |                                                                                  |
| **CSS Variable**       | `margin: var(--m)`                                     | `m-(--m)`         | `{ m: '--m' }`            | **Sugar**: Auto-detects `--`.                                                    |

## Space Between

Controlling spacing between child elements (Legacy/Alternative to Gap).

| Concept          | CSS Rule                  | Tailwind v4 Class   | `sz` Prop (Object Syntax) | Note                                                                             |
| :--------------- | :------------------------ | :------------------ | :------------------------ | :------------------------------------------------------------------------------- |
| **Space X**      | (on children)             | `space-x-<number>`  | `{ spaceX: <number> }`    | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Space Y**      | (on children)             | `space-y-<number>`  | `{ spaceY: <number> }`    | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Reverse X**    | `--tw-space-x-reverse: 1` | `space-x-reverse`   | `{ spaceXReverse: true }` |                                                                                  |
| **Reverse Y**    | `--tw-space-y-reverse: 1` | `space-y-reverse`   | `{ spaceYReverse: true }` |                                                                                  |
| **Negative**     | (on children)             | `-space-x-4`        | `{ spaceX: -<number> }`   | v4: fully dynamic, no static scale, accept any integer or 0.5-step decimal bare. |
| **Px**           | (on children)             | `space-x-px`        | `{ spaceX: 'px' }`        |                                                                                  |
| **Arbitrary**    | (on children)             | `space-x-[5px]`     | `{ spaceX: '5px' }`       |                                                                                  |
| **CSS Variable** | (on children)             | `space-x-(--space)` | `{ spaceX: '--space' }`   | **Sugar**: Auto-detects `--`.                                                    |


# Tables

Controlling the layout and style of tables.

## Border Collapse

Utilities for controlling whether table borders should collapse or be separated.

| Concept      | CSS Rule                     | Tailwind v4 Class | `sz` Prop (Object Syntax)        | Note |
| :----------- | :--------------------------- | :---------------- | :------------------------------- | :--- |
| **Collapse** | `border-collapse: collapse;` | `border-collapse` | `{ borderCollapse: 'collapse' }` |      |
| **Separate** | `border-collapse: separate;` | `border-separate` | `{ borderCollapse: 'separate' }` |      |

## Border Spacing

Utilities for controlling the spacing between table borders.

| Concept            | CSS Rule                                           | Tailwind v4 Class      | `sz` Prop (Object Syntax)  | Note |
| :----------------- | :------------------------------------------------- | :--------------------- | :------------------------- | :--- |
| Border Spacing 0   | `border-spacing: 0px`                              | `border-spacing-0`     | `{ borderSpacing: 0 }`     |      |
| Border Spacing px  | `border-spacing: 1px`                              | `border-spacing-px`    | `{ borderSpacing: 'px' }`  |      |
| Border Spacing 0.5 | `border-spacing: 0.125rem`                         | `border-spacing-0.5`   | `{ borderSpacing: 0.5 }`   |      |
| Border Spacing 1   | `border-spacing: 0.25rem`                          | `border-spacing-1`     | `{ borderSpacing: 1 }`     |      |
| Border Spacing 1.5 | `border-spacing: 0.375rem`                         | `border-spacing-1.5`   | `{ borderSpacing: 1.5 }`   |      |
| Border Spacing 2   | `border-spacing: 0.5rem`                           | `border-spacing-2`     | `{ borderSpacing: 2 }`     |      |
| Border Spacing 2.5 | `border-spacing: 0.625rem`                         | `border-spacing-2.5`   | `{ borderSpacing: 2.5 }`   |      |
| Border Spacing 3   | `border-spacing: 0.75rem`                          | `border-spacing-3`     | `{ borderSpacing: 3 }`     |      |
| Border Spacing 3.5 | `border-spacing: 0.875rem`                         | `border-spacing-3.5`   | `{ borderSpacing: 3.5 }`   |      |
| Border Spacing 4   | `border-spacing: 1rem`                             | `border-spacing-4`     | `{ borderSpacing: 4 }`     |      |
| Border Spacing 5   | `border-spacing: 1.25rem`                          | `border-spacing-5`     | `{ borderSpacing: 5 }`     |      |
| Border Spacing 6   | `border-spacing: 1.5rem`                           | `border-spacing-6`     | `{ borderSpacing: 6 }`     |      |
| Border Spacing 7   | `border-spacing: 1.75rem`                          | `border-spacing-7`     | `{ borderSpacing: 7 }`     |      |
| Border Spacing 8   | `border-spacing: 2rem`                             | `border-spacing-8`     | `{ borderSpacing: 8 }`     |      |
| Border Spacing 9   | `border-spacing: 2.25rem`                          | `border-spacing-9`     | `{ borderSpacing: 9 }`     |      |
| Border Spacing 10  | `border-spacing: 2.5rem`                           | `border-spacing-10`    | `{ borderSpacing: 10 }`    |      |
| Border Spacing 11  | `border-spacing: 2.75rem`                          | `border-spacing-11`    | `{ borderSpacing: 11 }`    |      |
| Border Spacing 12  | `border-spacing: 3rem`                             | `border-spacing-12`    | `{ borderSpacing: 12 }`    |      |
| Border Spacing 14  | `border-spacing: 3.5rem`                           | `border-spacing-14`    | `{ borderSpacing: 14 }`    |      |
| Border Spacing 16  | `border-spacing: 4rem`                             | `border-spacing-16`    | `{ borderSpacing: 16 }`    |      |
| Border Spacing 20  | `border-spacing: 5rem`                             | `border-spacing-20`    | `{ borderSpacing: 20 }`    |      |
| Border Spacing 24  | `border-spacing: 6rem`                             | `border-spacing-24`    | `{ borderSpacing: 24 }`    |      |
| Border Spacing 28  | `border-spacing: 7rem`                             | `border-spacing-28`    | `{ borderSpacing: 28 }`    |      |
| Border Spacing 32  | `border-spacing: 8rem`                             | `border-spacing-32`    | `{ borderSpacing: 32 }`    |      |
| Border Spacing 36  | `border-spacing: 9rem`                             | `border-spacing-36`    | `{ borderSpacing: 36 }`    |      |
| Border Spacing 40  | `border-spacing: 10rem`                            | `border-spacing-40`    | `{ borderSpacing: 40 }`    |      |
| Border Spacing 44  | `border-spacing: 11rem`                            | `border-spacing-44`    | `{ borderSpacing: 44 }`    |      |
| Border Spacing 48  | `border-spacing: 12rem`                            | `border-spacing-48`    | `{ borderSpacing: 48 }`    |      |
| Border Spacing 52  | `border-spacing: 13rem`                            | `border-spacing-52`    | `{ borderSpacing: 52 }`    |      |
| Border Spacing 56  | `border-spacing: 14rem`                            | `border-spacing-56`    | `{ borderSpacing: 56 }`    |      |
| Border Spacing 60  | `border-spacing: 15rem`                            | `border-spacing-60`    | `{ borderSpacing: 60 }`    |      |
| Border Spacing 64  | `border-spacing: 16rem`                            | `border-spacing-64`    | `{ borderSpacing: 64 }`    |      |
| Border Spacing 72  | `border-spacing: 18rem`                            | `border-spacing-72`    | `{ borderSpacing: 72 }`    |      |
| Border Spacing 80  | `border-spacing: 20rem`                            | `border-spacing-80`    | `{ borderSpacing: 80 }`    |      |
| Border Spacing 96  | `border-spacing: 24rem`                            | `border-spacing-96`    | `{ borderSpacing: 96 }`    |      |
| **X/Y Spacing**    | `border-spacing-x: (etc); border-spacing-y: (etc)` | `border-spacing-x-4`   | `{ borderSpacingX: 4 }`    |      |
| **Arbitrary**      | `border-spacing: 3px`                              | `border-spacing-[3px]` | `{ borderSpacing: '3px' }` |      |
| **Variable**       | `border-spacing: var(--s)`                         | `border-spacing-(--s)` | `{ borderSpacing: '--s' }` |      |

## Table Layout

Utilities for controlling the table layout algorithm.

| Concept   | CSS Rule               | Tailwind v4 Class | `sz` Prop (Object Syntax)  | Note |
| :-------- | :--------------------- | :---------------- | :------------------------- | :--- |
| **Auto**  | `table-layout: auto;`  | `table-auto`      | `{ tableLayout: 'auto' }`  |      |
| **Fixed** | `table-layout: fixed;` | `table-fixed`     | `{ tableLayout: 'fixed' }` |      |

## Caption Side

Utilities for controlling the alignment of table captions.

| Concept    | CSS Rule                | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :--------- | :---------------------- | :---------------- | :------------------------ | :--- |
| **Top**    | `caption-side: top;`    | `caption-top`     | `{ caption: 'top' }`      |      |
| **Bottom** | `caption-side: bottom;` | `caption-bottom`  | `{ caption: 'bottom' }`   |      |


## Tooling

### VS Code Extension (`@csszyx/vscode`)

IntelliSense, hover, and diagnostics for `sz` props. Supports JSX, TSX, JS, TS, HTML.

**Features:**

- Key + value completions inside `sz={{ ... }}` (variant-aware, depth 1 and 2)
- Hover preview — shows generated Tailwind className + inline CSS variables via `transform()`
- Diagnostics — unknown prop keys flagged as warnings; SUGGESTION_MAP hints (e.g. `padding` → `p`)
- TextMate grammar injection — syntax highlighting for `sz` attribute

**Settings:**

- `csszyx.enableDiagnostics` (default: `true`) — toggle unknown-prop warnings
- `csszyx.enableHover` (default: `true`) — toggle hover preview

**Build:** esbuild → `dist/extension.js` (85KB CJS, zero Babel, uses `@csszyx/compiler/browser`)

### MCP Server (`@csszyx/mcp-server`)

Exposes CSSzyx to AI assistants via Model Context Protocol.

**Tools:** `sz_expand`, `sz_validate`, `sz_lookup`, `sz_migrate`
**Resources:** `csszyx://docs/sz-props`, `csszyx://docs/variants`, `csszyx://llms-full`
**Prompts:** `review-sz-usage`, `migrate-tailwind-component`

```bash
npm install -g @csszyx/mcp-server
npx @csszyx/mcp-server   # stdio transport (Claude Desktop / Cursor)
```


# Transforms

Utilities for controlling element transformations.

## Rotate

Utilities for rotating elements.

| Concept        | CSS Rule           | Tailwind v4 Class                            | `sz` Prop (Object Syntax) | Note          |
| :------------- | :----------------- | :------------------------------------------- | :------------------------ | :------------ |
| Rotate 0       | `rotate: 0deg`     | `rotate-0`                                   | `{ rotate: 0 }`           |               |
| Rotate 1       | `rotate: 1deg`     | `rotate-1`                                   | `{ rotate: 1 }`           |               |
| Rotate 2       | `rotate: 2deg`     | `rotate-2`                                   | `{ rotate: 2 }`           |               |
| Rotate 3       | `rotate: 3deg`     | `rotate-3`                                   | `{ rotate: 3 }`           |               |
| Rotate 6       | `rotate: 6deg`     | `rotate-6`                                   | `{ rotate: 6 }`           |               |
| Rotate 12      | `rotate: 12deg`    | `rotate-12`                                  | `{ rotate: 12 }`          |               |
| Rotate 45      | `rotate: 45deg`    | `rotate-45`                                  | `{ rotate: 45 }`          |               |
| Rotate 90      | `rotate: 90deg`    | `rotate-90`                                  | `{ rotate: 90 }`          |               |
| Rotate 180     | `rotate: 180deg`   | `rotate-180`                                 | `{ rotate: 180 }`         |               |
| **Neg Angle**  | `rotate: -45deg`   | `-rotate-45`                                 | `{ rotate: -45 }`         |               |
| **X/Y/Z Axis** | `rotate: x 45deg`  | `rotate-x-45`, `rotate-y-90`, `rotate-z-180` | `{ rotateX: 45 }`(etc)    | 3D rotations. |
| **Arbitrary**  | `rotate: 1.2rad`   | `rotate-[1.2rad]`                            | `{ rotate: '1.2rad' }`    |               |
| **Variable**   | `rotate: var(--r)` | `rotate-(--r)`                               | `{ rotate: '--r' }`       |               |

## Scale

Utilities for scaling elements.

| Concept       | CSS Rule          | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------------ | :---------------- | :---------------- | :------------------------ | :--- |
| Scale 0       | `scale: 0`        | `scale-0`         | `{ scale: 0 }`            |      |
| Scale 50      | `scale: 0.5`      | `scale-50`        | `{ scale: 50 }`           |      |
| Scale 75      | `scale: 0.75`     | `scale-75`        | `{ scale: 75 }`           |      |
| Scale 90      | `scale: 0.9`      | `scale-90`        | `{ scale: 90 }`           |      |
| Scale 95      | `scale: 0.95`     | `scale-95`        | `{ scale: 95 }`           |      |
| Scale 100     | `scale: 1`        | `scale-100`       | `{ scale: 100 }`          |      |
| Scale 105     | `scale: 1.05`     | `scale-105`       | `{ scale: 105 }`          |      |
| Scale 110     | `scale: 1.1`      | `scale-110`       | `{ scale: 110 }`          |      |
| Scale 125     | `scale: 1.25`     | `scale-125`       | `{ scale: 125 }`          |      |
| Scale 150     | `scale: 1.5`      | `scale-150`       | `{ scale: 150 }`          |      |
| Scale 200     | `scale: 2`        | `scale-200`       | `{ scale: 200 }`          |      |
| **X Axis**    | `scale-x: 0.5`    | `scale-x-50`      | `{ scaleX: 50 }`          |      |
| **Y Axis**    | `scale-y: 0.5`    | `scale-y-50`      | `{ scaleY: 50 }`          |      |
| **Z Axis**    | `scale-z: 0.5`    | `scale-z-50`      | `{ scaleZ: 50 }`          |      |
| **3D**        | `scale: 0.5`      | `scale-3d`        | `{ scale: '3d' }`         |      |
| **Arbitrary** | `scale: 1.5`      | `scale-[1.5]`     | `{ scale: '1.5' }`        |      |
| **Variable**  | `scale: var(--s)` | `scale-(--s)`     | `{ scale: '--s' }`        |      |

## Skew

Utilities for skewing elements.

| Concept       | CSS Rule                  | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------------ | :------------------------ | :---------------- | :------------------------ | :--- |
| Skew X 0      | `transform: skewX(0deg)`  | `skew-x-0`        | `{ skewX: 0 }`            |      |
| Skew X 1      | `transform: skewX(1deg)`  | `skew-x-1`        | `{ skewX: 1 }`            |      |
| Skew X 2      | `transform: skewX(2deg)`  | `skew-x-2`        | `{ skewX: 2 }`            |      |
| Skew X 3      | `transform: skewX(3deg)`  | `skew-x-3`        | `{ skewX: 3 }`            |      |
| Skew X 6      | `transform: skewX(6deg)`  | `skew-x-6`        | `{ skewX: 6 }`            |      |
| Skew X 12     | `transform: skewX(12deg)` | `skew-x-12`       | `{ skewX: 12 }`           |      |
| Skew Y 0      | `transform: skewY(0deg)`  | `skew-y-0`        | `{ skewY: 0 }`            |      |
| Skew Y 1      | `transform: skewY(1deg)`  | `skew-y-1`        | `{ skewY: 1 }`            |      |
| Skew Y 2      | `transform: skewY(2deg)`  | `skew-y-2`        | `{ skewY: 2 }`            |      |
| Skew Y 3      | `transform: skewY(3deg)`  | `skew-y-3`        | `{ skewY: 3 }`            |      |
| Skew Y 6      | `transform: skewY(6deg)`  | `skew-y-6`        | `{ skewY: 6 }`            |      |
| Skew Y 12     | `transform: skewY(12deg)` | `skew-y-12`       | `{ skewY: 12 }`           |      |
| **Arbitrary** | `skew-x: 5deg`            | `skew-x-[5deg]`   | `{ skewX: '5deg' }`       |      |

## Translate

Utilities for translating elements.

| Concept                  | CSS Rule                                       | Tailwind v4 Class          | `sz` Prop (Object Syntax)        | Note                                                           |
| :----------------------- | :--------------------------------------------- | :------------------------- | :------------------------------- | :------------------------------------------------------------- |
| **Shorthand Spacing**    | `translate: calc(var(--spacing) * <n>)`        | `translate-<number>`       | `{ translate: <number> }`        | CSS `translate` property — sets both axes                      |
| **Shorthand Fraction**   | `translate: calc(<int>/<int> * 100%)`          | `translate-<int>/<int>`    | `{ translate: '<int>/<int>' }`   | v4: bare fraction, both axes                                   |
| **Shorthand Negative**   | `translate: calc(-<int>/<int> * 100%)`         | `-translate-<int>/<int>`   | `{ translate: '-<int>/<int>' }`  |                                                                |
| **Translate X Spacing**  | `translate-x: calc(var(--spacing) * <number>)` | `translate-x-<number>`     | `{ translateX: <number> }`       | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Translate X Px**       | `translate-x: 1px`                             | `translate-x-px`           | `{ translateX: 'px' }`           |                                                                |
| **Translate X Fraction** | `translate-x: calc(<int>/<int> * 100%)`        | `translate-x-<int>/<int>`  | `{ translateX: '<int>/<int>' }`  | v4: any integer/integer fraction works bare                    |
| **Translate X Neg Frac** | `translate-x: calc(-<int>/<int> * 100%)`       | `-translate-x-<int>/<int>` | `{ translateX: '-<int>/<int>' }` |                                                                |
| **Translate Y Spacing**  | `translate-y: calc(var(--spacing) * <number>)` | `translate-y-<number>`     | `{ translateY: <number> }`       | v4: fully dynamic, accept any integer or 0.5-step decimal bare |
| **Translate Y Fraction** | `translate-y: calc(<int>/<int> * 100%)`        | `translate-y-<int>/<int>`  | `{ translateY: '<int>/<int>' }`  | v4: any integer/integer fraction works bare                    |
| **Translate Y Neg Frac** | `translate-y: calc(-<int>/<int> * 100%)`       | `-translate-y-<int>/<int>` | `{ translateY: '-<int>/<int>' }` |                                                                |
| **Z Axis**               | `translate-z: 4px`                             | `translate-z-4`            | `{ translateZ: 4 }`              |                                                                |
| **Full**                 | `translate-x: 100%`                            | `translate-x-full`         | `{ translateX: 'full' }`         |                                                                |
| **3D**                   | `translate: (value)`                           | `translate-3d`             | `{ translate: '3d' }`            |                                                                |
| **Arbitrary**            | `translate-x: 5px`                             | `translate-x-[5px]`        | `{ translateX: '5px' }`          |                                                                |
| **Variable**             | `translate-x: var(--t)`                        | `translate-x-(--t)`        | `{ translateX: '--t' }`          |                                                                |

## Transform Origin

Utilities for controlling the origin of transformations.

| Concept       | CSS Rule                     | Tailwind v4 Class                                                                                                                                                 | `sz` Prop (Object Syntax) | Note                             |
| :------------ | :--------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------ | :------------------------------- |
| **Keywords**  | `transform-origin: center`   | `origin-center`, `origin-top`, `origin-top-right`, `origin-right`, `origin-bottom-right`, `origin-bottom`, `origin-bottom-left`, `origin-left`, `origin-top-left` | `{ origin: 'top' }`       | Shorthand for `transformOrigin`. |
| **Arbitrary** | `transform-origin: (etc)`    | `origin-[33%_75%]`                                                                                                                                                | `{ origin: '33%_75%' }`   |                                  |
| **Variable**  | `transform-origin: var(--o)` | `origin-(--o)`                                                                                                                                                    | `{ origin: '--o' }`       |                                  |

## Transform Style

Utilities for controlling how children of a 3D element are rendered.

| Concept  | CSS Rule                        | Tailwind v4 Class | `sz` Prop (Object Syntax)    | Note |
| :------- | :------------------------------ | :---------------- | :--------------------------- | :--- |
| **Flat** | `transform-style: flat;`        | `transform-flat`  | `{ transformStyle: 'flat' }` |      |
| **3D**   | `transform-style: preserve-3d;` | `transform-3d`    | `{ transformStyle: '3d' }`   |      |

## Backface Visibility

Utilities for controlling whether the back face of an element is visible when turned towards the user.

| Concept     | CSS Rule                        | Tailwind v4 Class  | `sz` Prop (Object Syntax) | Note                                |
| :---------- | :------------------------------ | :----------------- | :------------------------ | :---------------------------------- |
| **Visible** | `backface-visibility: visible;` | `backface-visible` | `{ backface: 'visible' }` | Shorthand for `backfaceVisibility`. |
| **Hidden**  | `backface-visibility: hidden;`  | `backface-hidden`  | `{ backface: 'hidden' }`  |                                     |

## Perspective

Utilities for controlling the 3D perspective of an element.

| Concept       | CSS Rule                | Tailwind v4 Class                                          | `sz` Prop (Object Syntax)  | Note |
| :------------ | :---------------------- | :--------------------------------------------------------- | :------------------------- | :--- |
| **Scale**     | `perspective: 250px`    | `perspective-none`, `perspective-xs`(etc)`perspective-2xl` | `{ perspective: 'xs' }`    |      |
| **Arbitrary** | `perspective: 500px`    | `perspective-[500px]`                                      | `{ perspective: '500px' }` |      |
| **Variable**  | `perspective: var(--p)` | `perspective-(--p)`                                        | `{ perspective: '--p' }`   |      |

## Perspective Origin

Utilities for controlling the origin of the perspective.

| Concept       | CSS Rule                     | Tailwind v4 Class                                          | `sz` Prop (Object Syntax)          | Note |
| :------------ | :--------------------------- | :--------------------------------------------------------- | :--------------------------------- | :--- |
| **Keywords**  | `perspective-origin: center` | `perspective-origin-center`, `perspective-origin-top`(etc) | `{ perspectiveOrigin: 'top' }`     |      |
| **Arbitrary** | `perspective-origin: (etc)`  | `perspective-origin-[25%_25%]`                             | `{ perspectiveOrigin: '25%_25%' }` |      |

## Transform

Utilities for controlling the transform property itself.

| Concept  | CSS Rule                                     | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
| :------- | :------------------------------------------- | :---------------- | :------------------------ | :--- |
| **None** | `transform: none;`                           | `transform-none`  | `{ transform: 'none' }`   |      |
| **GPU**  | `transform: translateZ(0)` (GPU compositing) | `transform-gpu`   | `{ transform: 'gpu' }`    |      |
| **CPU**  | `transform: none` (disable GPU compositing)  | `transform-cpu`   | `{ transform: 'cpu' }`    |      |


# Transitions & Animation

Controlling transition and animation properties.

## Transition Property

Utilities for controlling which CSS properties transition.

| Concept       | CSS Rule                                                            | Tailwind v4 Class                                                                                        | `sz` Prop (Object Syntax)   | Note                |
| :------------ | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------- | :-------------------------- | :------------------ |
| **None**      | `transition-property: none;`                                        | `transition-none`                                                                                        | `{ transition: 'none' }`    |                     |
| **Common**    | `transition-property: color, background-color, border-color, (etc)` | `transition`                                                                                             | `{ transition: true }`      | Default properties. |
| **Scale**     | `transition-property: color, background-color, border-color, (etc)` | `transition-all`, `transition-colors`, `transition-opacity`, `transition-shadow`, `transition-transform` | `{ transition: 'colors' }`  |                     |
| **Arbitrary** | `transition-property: opacity`                                      | `transition-opacity`                                                                                     | `{ transition: 'opacity' }` |                     |

## Transition Behavior

Utilities for controlling the transition behavior.

| Concept      | CSS Rule                               | Tailwind v4 Class     | `sz` Prop (Object Syntax)            | Note |
| :----------- | :------------------------------------- | :-------------------- | :----------------------------------- | :--- |
| **Discrete** | `transition-behavior: allow-discrete;` | `transition-discrete` | `{ transitionBehavior: 'discrete' }` |      |
| **Normal**   | `transition-behavior: normal;`         | `transition-normal`   | `{ transitionBehavior: 'normal' }`   |      |

## Transition Duration

Utilities for controlling the duration of CSS transitions.

| Concept       | CSS Rule                      | Tailwind v4 Class | sz Prop              |
| :------------ | :---------------------------- | :---------------- | :------------------- |
| Duration 0    | `transition-duration: 0ms`    | `duration-0`      | `{ duration: 0 }`    |
| Duration 75   | `transition-duration: 75ms`   | `duration-75`     | `{ duration: 75 }`   |
| Duration 100  | `transition-duration: 100ms`  | `duration-100`    | `{ duration: 100 }`  |
| Duration 150  | `transition-duration: 150ms`  | `duration-150`    | `{ duration: 150 }`  |
| Duration 200  | `transition-duration: 200ms`  | `duration-200`    | `{ duration: 200 }`  |
| Duration 300  | `transition-duration: 300ms`  | `duration-300`    | `{ duration: 300 }`  |
| Duration 500  | `transition-duration: 500ms`  | `duration-500`    | `{ duration: 500 }`  |
| Duration 700  | `transition-duration: 700ms`  | `duration-700`    | `{ duration: 700 }`  |
| Duration 1000 | `transition-duration: 1000ms` | `duration-1000`   | `{ duration: 1000 }` |

## Transition Timing Function

Utilities for controlling the easing of CSS transitions.

| Concept       | CSS Rule                                                | Tailwind v4 Class                                   | `sz` Prop (Object Syntax)               | Note |
| :------------ | :------------------------------------------------------ | :-------------------------------------------------- | :-------------------------------------- | :--- |
| **Keywords**  | `transition-timing-function: linear`                    | `ease-linear`, `ease-in`, `ease-out`, `ease-in-out` | `{ ease: 'in' }`                        |      |
| **Arbitrary** | `transition-timing-function: cubic-bezier(0.4,0,0.2,1)` | `ease-[cubic-bezier(0.4,0,0.2,1)]`                  | `{ ease: 'cubic-bezier(0.4,0,0.2,1)' }` |      |
| **Variable**  | `transition-timing-function: var(--e)`                  | `ease-(--e)`                                        | `{ ease: '--e' }`                       |      |

## Transition Delay

Utilities for controlling the delay of CSS transitions.

| Concept    | CSS Rule                   | Tailwind v4 Class | sz Prop           |
| :--------- | :------------------------- | :---------------- | :---------------- |
| Delay 0    | `transition-delay: 0ms`    | `delay-0`         | `{ delay: 0 }`    |
| Delay 75   | `transition-delay: 75ms`   | `delay-75`        | `{ delay: 75 }`   |
| Delay 100  | `transition-delay: 100ms`  | `delay-100`       | `{ delay: 100 }`  |
| Delay 150  | `transition-delay: 150ms`  | `delay-150`       | `{ delay: 150 }`  |
| Delay 200  | `transition-delay: 200ms`  | `delay-200`       | `{ delay: 200 }`  |
| Delay 300  | `transition-delay: 300ms`  | `delay-300`       | `{ delay: 300 }`  |
| Delay 500  | `transition-delay: 500ms`  | `delay-500`       | `{ delay: 500 }`  |
| Delay 700  | `transition-delay: 700ms`  | `delay-700`       | `{ delay: 700 }`  |
| Delay 1000 | `transition-delay: 1000ms` | `delay-1000`      | `{ delay: 1000 }` |

## Animation

Utilities for animating elements with CSS animations.

| Concept       | CSS Rule                             | Tailwind v4 Class                                                 | `sz` Prop (Object Syntax)                | Note |
| :------------ | :----------------------------------- | :---------------------------------------------------------------- | :--------------------------------------- | :--- |
| **None**      | `animation: none;`                   | `animate-none`                                                    | `{ animate: 'none' }`                    |      |
| **Keywords**  | `animation: spin 1s linear infinite` | `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce` | `{ animate: 'spin' }`                    |      |
| **Arbitrary** | `animation: spin_1s_linear_infinite` | `animate-[spin_1s_linear_infinite]`                               | `{ animate: 'spin_1s_linear_infinite' }` |      |

## Animation Delay

Tailwind v4 has no `animation-delay-*` utility. CSSzyx emits an arbitrary CSS property.
`delay` is **transition-delay** — do not confuse with `animationDelay`.

| Concept           | CSS Rule                        | Output Class                            | `sz` Prop (Object Syntax)                   | Note                                             |
| :---------------- | :------------------------------ | :-------------------------------------- | :------------------------------------------ | :----------------------------------------------- |
| **Number (ms)**   | `animation-delay: 150ms`        | `[animation-delay:150ms]`               | `{ animationDelay: 150 }`                   | Number → appended `ms`                           |
| **Number zero**   | `animation-delay: 0ms`          | `[animation-delay:0ms]`                 | `{ animationDelay: 0 }`                     |                                                  |
| **String**        | `animation-delay: 0.5s`         | `[animation-delay:0.5s]`                | `{ animationDelay: '0.5s' }`                | String passed through as-is                      |
| **Stagger combo** | `animation: pulse; delay 150ms` | `animate-pulse [animation-delay:150ms]` | `{ animate: 'pulse', animationDelay: 150 }` | `delay` is transition-delay, not animation-delay |


# Typography

Controlling the style, size, and layout of text.

## Font Family

Controlling the font family.

| Concept          | CSS Rule                                                                        | Tailwind v4 Class        | `sz` Prop (Object Syntax)     | Note                                                               |
| :--------------- | :------------------------------------------------------------------------------ | :----------------------- | :---------------------------- | :----------------------------------------------------------------- |
| **Sans**         | `font-family: ui-sans-serif, system-ui, sans-serif`                             | `font-sans`              | `{ fontFamily: 'sans' }`      | **Preferred key**.                                                 |
| **Serif**        | `font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`      | `font-serif`             | `{ fontFamily: 'serif' }`     |                                                                    |
| **Mono**         | `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` | `font-mono`              | `{ fontFamily: 'mono' }`      |                                                                    |
| **Arbitrary**    | `font-family: "My Font"`                                                        | `font-['My_Font']`       | `{ fontFamily: "'My Font'" }` |                                                                    |
| **CSS Variable** | `font-family: var(--f)`                                                         | `font-(family-name:--f)` | `{ fontFamily: '--f' }`       | **Sugar**: Auto-detects `--`. Type hint disambiguates from weight. |

## Font Size

Controlling the font size.

| Concept          | CSS Rule                                    | Tailwind v4 Class                                                                                                                                       | `sz` Prop (Object Syntax)               | Note                                                              |
| :--------------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------- | :---------------------------------------------------------------- |
| **Scale**        | `font-size: (size); line-height: (leading)` | `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`, `text-4xl`, `text-5xl`, `text-6xl`, `text-7xl`, `text-8xl`, `text-9xl` | `{ text: 'xs' }`, `{ text: 'sm' }` etc. | Sets size & leading.                                              |
| **Number**       | `font-size: 16px`                           | `text-[16px]`                                                                                                                                           | `{ text: '16px' }`                      | CamelCase `fontSize` also valid.                                  |
| **Arbitrary**    | `font-size: 1.5rem`                         | `text-[1.5rem]`                                                                                                                                         | `{ text: '1.5rem' }`                    |                                                                   |
| **CSS Variable** | `font-size: var(--size)`                    | `text-(length:--size)`                                                                                                                                  | `{ text: '--size' }`                    | **Sugar**: Auto-detects `--`. Type hint disambiguates from color. |

## Font Weight

Controlling the font weight.

| Concept          | CSS Rule                | Tailwind v4 Class                                                                                                                        | `sz` Prop (Object Syntax)                                     | Note                                                               |
| :--------------- | :---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------------------------------------------- |
| **Keywords**     | `font-weight: 100-900`  | `font-thin`, `font-extralight`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black` | `{ fontWeight: 'thin' }`, `{ fontWeight: 'extralight' }` etc. |                                                                    |
| **Number**       | `font-weight: 100-900`  | `font-100`, `font-200`, `font-300`, `font-400`, `font-500`, `font-600`, `font-700`, `font-800`, `font-900`                               | `{ fontWeight: 100 }`, `{ fontWeight: 200 }` etc.             | v4 shorthand.                                                      |
| **Alias**        | (Sugar)                 | `font-bold`                                                                                                                              | `{ weight: 'bold' }`                                          | Sugar for `fontWeight`.                                            |
| **Arbitrary**    | `font-weight: 550`      | `font-[550]`                                                                                                                             | `{ fontWeight: 550 }`                                         |                                                                    |
| **CSS Variable** | `font-weight: var(--w)` | `font-(weight:--w)`                                                                                                                      | `{ fontWeight: '--w' }`                                       | **Sugar**: Auto-detects `--`. Type hint disambiguates from family. |

## Font Stretch

Controlling the font width.

| Concept                | CSS Rule                 | Tailwind v4 Class     | `sz` Prop (Object Syntax) | Note |
| :--------------------- | :----------------------- | :-------------------- | :------------------------ | :--- |
| Font Stretch 50%       | `font-stretch: 50%`      | `font-stretch-50%`    | `{ fontStretch: '50%' }`  |      |
| Font Stretch 75%       | `font-stretch: 75%`      | `font-stretch-75%`    | `{ fontStretch: '75%' }`  |      |
| Font Stretch 100%      | `font-stretch: 100%`     | `font-stretch-100%`   | `{ fontStretch: '100%' }` |      |
| Font Stretch 125%      | `font-stretch: 125%`     | `font-stretch-125%`   | `{ fontStretch: '125%' }` |      |
| Font Stretch 150%      | `font-stretch: 150%`     | `font-stretch-150%`   | `{ fontStretch: '150%' }` |      |
| Font Stretch Arbitrary | `font-stretch: 110%`     | `font-stretch-[110%]` | `{ fontStretch: '110%' }` |      |
| CSS Variable           | `font-stretch: var(--s)` | `font-stretch-(--s)`  | `{ fontStretch: '--s' }`  |      |

## Font Variant Numeric

Controlling numeric glyphs.

| Concept     | CSS Rule                                      | Tailwind v4 Class                                                                                                                                        | `sz` Prop (Object Syntax)             | Note                          |
| :---------- | :-------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------ | :---------------------------- |
| **Variant** | `font-variant-numeric: ordinal, slashed-zero` | `normal-nums`, `ordinal`, `slashed-zero`, `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions` | `{ fontVariant: 'normal-nums' }` etc. |                               |
| **Boolean** | `font-variant-numeric: slashed-zero`          | `slashed-zero`                                                                                                                                           | `{ slashedZero: true }`               | **Overwrites** `fontVariant`. |
| **Boolean** | `font-variant-numeric: ordinal`               | `ordinal`                                                                                                                                                | `{ ordinal: true }`                   | **Overwrites** `fontVariant`. |

## Font Features

Controlling font-feature-settings. Added in Tailwind v4.2.

| Concept       | CSS Rule                          | Tailwind v4 Class          | `sz` Prop (Object Syntax)      | Note |
| :------------ | :-------------------------------- | :------------------------- | :----------------------------- | :--- |
| **Normal**    | `font-feature-settings: normal`   | `font-features-normal`     | `{ fontFeatures: 'normal' }`   |      |
| **Arbitrary** | `font-feature-settings: "liga" 1` | `font-features-["liga"_1]` | `{ fontFeatures: '"liga" 1' }` |      |

## Font Style & Smoothing

Controlling the font style and smoothing.

| Concept         | CSS Rule                              | Tailwind v4 Class      | `sz` Prop (Object Syntax)       | Note                                                   |
| :-------------- | :------------------------------------ | :--------------------- | :------------------------------ | :----------------------------------------------------- |
| **Italic**      | `font-style: italic`                  | `italic`               | `{ italic: true }`              |                                                        |
| **Not Italic**  | `font-style: normal`                  | `not-italic`           | `{ notItalic: true }`           | `false` = NOOP; use `notItalic: true` to reset.        |
| **Antialiased** | `-webkit-font-smoothing: antialiased` | `antialiased`          | `{ antialiased: true }`         |                                                        |
| **Subpixel**    | `-webkit-font-smoothing: auto`        | `subpixel-antialiased` | `{ subpixelAntialiased: true }` | `false` = NOOP; use `subpixelAntialiased` to override. |

## Letter Spacing (Tracking)

Controlling the tracking (letter spacing).

| Concept          | CSS Rule                   | Tailwind v4 Class  | `sz` Prop (Object Syntax) | Note |
| :--------------- | :------------------------- | :----------------- | :------------------------ | :--- |
| Tracking Tighter | `-0.05em`                  | `tracking-tighter` | `{ tracking: 'tighter' }` |      |
| Tracking Tight   | `-0.025em`                 | `tracking-tight`   | `{ tracking: 'tight' }`   |      |
| Tracking Normal  | `0em`                      | `tracking-normal`  | `{ tracking: 'normal' }`  |      |
| Tracking Wide    | `0.025em`                  | `tracking-wide`    | `{ tracking: 'wide' }`    |      |
| Tracking Wider   | `0.05em`                   | `tracking-wider`   | `{ tracking: 'wider' }`   |      |
| Tracking Widest  | `0.1em`                    | `tracking-widest`  | `{ tracking: 'widest' }`  |      |
| Arbitrary        | `letter-spacing: .25em`    | `tracking-[.25em]` | `{ tracking: '.25em' }`   |      |
| CSS Variable     | `letter-spacing: var(--t)` | `tracking-(--t)`   | `{ tracking: '--t' }`     |      |

## Line Height (Leading)

Controlling the leading (line height).

| Concept          | CSS Rule                   | Tailwind v4 Class                                                                                       | `sz` Prop (Object Syntax)  | Note                          |
| :--------------- | :------------------------- | :------------------------------------------------------------------------------------------------------ | :------------------------- | :---------------------------- |
| **Keywords**     | `line-height: 1.5`         | `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose`   | `{ leading: 'none' }` etc. |                               |
| **Fixed**        | `line-height: .75rem`(etc) | `leading-3`, `leading-4`, `leading-5`, `leading-6`, `leading-7`, `leading-8`, `leading-9`, `leading-10` | `{ leading: 3 }` etc.      | Maps to spacing scale.        |
| **Arbitrary**    | `line-height: 3rem`        | `leading-[3rem]`                                                                                        | `{ leading: '3rem' }`      |                               |
| **CSS Variable** | `line-height: var(--l)`    | `leading-(--l)`                                                                                         | `{ leading: '--l' }`       | **Sugar**: Auto-detects `--`. |

### Text/Leading Shorthand

When both `text` (font-size) and `leading` (line-height) are specified together, they are automatically merged into a single Tailwind class using the `/` shorthand syntax.

| Input                               | Output             | Note                                     |
| :---------------------------------- | :----------------- | :--------------------------------------- |
| `{ text: 'lg', leading: 7 }`        | `text-lg/7`        | Numeric leading merged with text size.   |
| `{ text: 'sm', leading: 'tight' }`  | `text-sm/tight`    | Keyword leading merged with text size.   |
| `{ text: 'xl', leading: '1.5rem' }` | `text-xl/[1.5rem]` | Arbitrary leading merged with text size. |
| `{ text: 'lg' }`                    | `text-lg`          | No merge — `leading` not present.        |
| `{ leading: 7 }`                    | `leading-7`        | No merge — `text` not present.           |

## Text Align

Controlling the alignment of text.

| Concept   | CSS Rule                          | Tailwind v4 Class                                                                  | `sz` Prop (Object Syntax)    | Note |
| :-------- | :-------------------------------- | :--------------------------------------------------------------------------------- | :--------------------------- | :--- |
| **Align** | `text-align: left, center, right` | `text-left`, `text-center`, `text-right`, `text-justify`, `text-start`, `text-end` | `{ textAlign: 'left' }` etc. |      |

## Text Color

Controlling the text color.

| Concept               | CSS Rule          | Tailwind v4 Class                                                              | `sz` Prop (Object Syntax)                  | Note                                       |
| :-------------------- | :---------------- | :----------------------------------------------------------------------------- | :----------------------------------------- | :----------------------------------------- |
| **Keywords**          | `color: inherit`  | `text-inherit`, `text-current`, `text-transparent`, `text-black`, `text-white` | `{ color: 'inherit' }` etc.                |                                            |
| **Color**             | `color: (value)`  | `text-slate-50`(etc)`text-slate-950` (and full palette)                        | `{ color: 'slate-50' }` etc.               | Full color palette.                        |
| **Opacity**           | `color: (value)`  | `text-blue-500/50`                                                             | `{ color: { color: 'blue-500', op: 50 } }` |                                            |
| **CSS Var + Opacity** | `color: var(--c)` | `text-(--c)/50`                                                                | `{ color: { color: '--c', op: 50 } }`      | CSS variables are auto-wrapped in `(...)`. |
| **Arbitrary**         | `color: (value)`  | `text-[#50d71e]`                                                               | `{ color: '#50d71e' }`                     |                                            |
| **CSS Variable**      | `color: var(--c)` | `text-(--c)`                                                                   | `{ color: '--c' }`                         | **Sugar**: Auto-detects `--`.              |

## Text Decoration

Controlling the decoration of text.

| Concept            | CSS Rule                              | Tailwind v4 Class                                                                                                                     | `sz` Prop (Object Syntax)           | Note                                                          |
| :----------------- | :------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------- | :------------------------------------------------------------ |
| **Line (string)**  | `text-decoration-line: underline`     | `underline`, `overline`, `line-through`, `no-underline`                                                                               | `{ decoration: 'underline' }` etc.  | String key. `'none'` → `no-underline` (resets ALL decoration) |
| **Style**          | `text-decoration-style: solid`        | `decoration-solid`, `decoration-dashed`, `decoration-dotted`, `decoration-double`, `decoration-wavy`                                  | `{ decorationStyle: 'solid' }` etc. |                                                               |
| **Thickness**      | `text-decoration-thickness: auto`     | `decoration-0`, `decoration-1`, `decoration-2`, `decoration-4`, `decoration-8`, `decoration-auto`, `decoration-from-font`             | `{ decorationThickness: 1 }` etc.   |                                                               |
| **Offset**         | `text-underline-offset: auto`         | `underline-offset-0`, `underline-offset-1`, `underline-offset-2`, `underline-offset-4`, `underline-offset-8`, `underline-offset-auto` | `{ underlineOffset: 1 }` etc.       |                                                               |
| **Color**          | `text-decoration-color: currentColor` | `decoration-blue-500`                                                                                                                 | `{ decorationColor: 'blue-500' }`   |                                                               |
| **Arbitrary**      | `text-decoration: (value)`            | `decoration-[3px]`                                                                                                                    | `{ decorationThickness: '3px' }`    |                                                               |
| **Var**            | `text-decoration: (value)`            | `decoration-(--v)`                                                                                                                    | `{ decorationThickness: '--v' }`    | **Sugar**: Auto-detects `--`.                                 |
| **Bool underline** | `text-decoration-line: underline`     | `underline`                                                                                                                           | `{ underline: true }`               | **Sugar**. `false` = NOOP.                                    |
| **Bool overline**  | `text-decoration-line: overline`      | `overline`                                                                                                                            | `{ overline: true }`                | **Sugar**. `false` = NOOP.                                    |
| **Bool through**   | `text-decoration-line: line-through`  | `line-through`                                                                                                                        | `{ lineThrough: true }`             | **Sugar**. `false` = NOOP.                                    |
| **Bool reset**     | `text-decoration-line: none`          | `no-underline`                                                                                                                        | `{ noUnderline: true }`             | **Sugar**. Resets ALL decoration. Use for responsive reset.   |

## Text Transform

Controlling the capitalization of text.

| Concept             | CSS Rule                    | Tailwind v4 Class                                     | `sz` Prop (Object Syntax)             | Note                                   |
| :------------------ | :-------------------------- | :---------------------------------------------------- | :------------------------------------ | :------------------------------------- |
| **Transform**       | `text-transform: uppercase` | `uppercase`, `lowercase`, `capitalize`, `normal-case` | `{ textTransform: 'uppercase' }` etc. |                                        |
| **Boolean (Sugar)** | `text-transform: uppercase` | `uppercase`                                           | `{ uppercase: true }`                 | **Sugar**. Overwrites `textTransform`. |

## Text Overflow & Whitespace

Controlling text wrapping and overflow.

| Concept                 | CSS Rule                                       | Tailwind v4 Class                                                                                                                   | `sz` Prop (Object Syntax)                            | Note                                                                                                                       |
| :---------------------- | :--------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------- |
| **Overflow**            | `text-overflow: ellipsis`                      | `truncate`, `text-ellipsis`, `text-clip`                                                                                            | `{ textOverflow: 'ellipsis' }`(etc)                  |                                                                                                                            |
| **Wrap**                | `text-wrap: wrap`                              | `text-wrap`, `text-nowrap`, `text-balance`, `text-pretty`                                                                           | `{ textWrap: 'wrap' }`(etc)                          |                                                                                                                            |
| **Indent Spacing**      | `text-indent: calc(var(--spacing) * <number>)` | `indent-<number>`                                                                                                                   | `{ indent: <number> }`                               | v4: fully dynamic, accept any integer or 0.5-step decimal bare                                                             |
| **Indent Px**           | `text-indent: 1px`                             | `indent-px`                                                                                                                         | `{ indent: 'px' }`                                   |                                                                                                                            |
| **Indent Arbitrary**    | `text-indent: 50%`                             | `indent-[50%]`                                                                                                                      | `{ indent: '50%' }`                                  |                                                                                                                            |
| **Indent CSS Variable** | `text-indent: var(--i)`                        | `indent-(--i)`                                                                                                                      | `{ indent: '--i' }`                                  | **Sugar**: Auto-detects `--`.                                                                                              |
| **Vertical**            | `vertical-align: baseline`                     | `align-baseline`, `align-top`, `align-middle`, `align-bottom`, `align-text-top`, `align-text-bottom`, `align-sub`, `align-super`    | `{ align: 'middle' }`(etc)                           |                                                                                                                            |
| **Arbitrary Vertical**  | `vertical-align: (value)`                      | `align-[4px]`                                                                                                                       | `{ align: '4px' }`                                   |                                                                                                                            |
| **Var Vertical**        | `vertical-align: (value)`                      | `align-(--v)`                                                                                                                       | `{ align: '--v' }`                                   |                                                                                                                            |
| **Whitespace**          | `white-space: normal`                          | `whitespace-normal`, `whitespace-nowrap`, `whitespace-pre`, `whitespace-pre-line`, `whitespace-pre-wrap`, `whitespace-break-spaces` | `{ whitespace: 'normal' }`(etc)                      |                                                                                                                            |
| **Word Break**          | `word-break: break-all`                        | `break-normal`, `break-all`, `break-keep`                                                                                           | `{ break: 'all' }`                                   | v4.1: `break-words` moved to `wrap`                                                                                        |
| **Overflow Wrap**       | `overflow-wrap: anywhere`                      | `wrap-normal`, `wrap-break-word`, `wrap-anywhere`                                                                                   | `{ wrap: 'anywhere' }`                               | v4.1: new `wrap-*` prefix (was `break-*`)                                                                                  |
| **Hyphens**             | `hyphens: manual`                              | `hyphens-none`, `hyphens-manual`, `hyphens-auto`                                                                                    | `{ hyphens: 'auto' }`                                |                                                                                                                            |
| **Content**             | `content: none`                                | `content-none`                                                                                                                      | `{ content: 'none' }`                                |                                                                                                                            |
| **Content Empty**       | `content: ""`                                  | `content-['']`                                                                                                                      | `{ content: '""' }` or `{ content: "''" }`           | Compiler normalizes double-quote form `'""'` to single-quote output `content-['']`. Both JS forms produce identical class. |
| **Arbitrary Content**   | `content: (value)`                             | `content-['hello']`                                                                                                                 | `{ content: "'hello'" }` or `{ content: '"hello"' }` | Double-quote-wrapped values are normalized to single-quote brackets at compile time.                                       |
| **Var Content**         | `content: (value)`                             | `content-(--c)`                                                                                                                     | `{ content: '--c' }`                                 |                                                                                                                            |
| **Line Clamp**          | `line-clamp`                                   | `line-clamp-1`, `line-clamp-2`, `line-clamp-3`, `line-clamp-4`, `line-clamp-5`, `line-clamp-6`, `line-clamp-none`                   | `{ lineClamp: 1 }`(etc)                              |                                                                                                                            |
| **Arbitrary Clamp**     | `line-clamp`                                   | `line-clamp-[7]`                                                                                                                    | `{ lineClamp: 7 }`                                   |                                                                                                                            |
| **Var Clamp**           | `line-clamp`                                   | `line-clamp-(--c)`                                                                                                                  | `{ lineClamp: '--c' }`                               |                                                                                                                            |

## List Style

Controlling list styles.

| Concept            | CSS Rule                            | Tailwind v4 Class                        | `sz` Prop (Object Syntax)                                     | Note                          |
| :----------------- | :---------------------------------- | :--------------------------------------- | :------------------------------------------------------------ | :---------------------------- |
| **Type**           | `list-style-type: disc`             | `list-none`, `list-disc`, `list-decimal` | `{ list: 'none' }`, `{ list: 'disc' }`, `{ list: 'decimal' }` |                               |
| **Arbitrary Type** | `list-style-type: (value)`          | `list-[upper-roman]`                     | `{ list: 'upper-roman' }`                                     |                               |
| **Var Type**       | `list-style-type: var(--t)`         | `list-(--t)`                             | `{ list: '--t' }`                                             | **Sugar**: Auto-detects `--`. |
| **Position**       | `list-style-position: inside`       | `list-inside`, `list-outside`            | `{ listPos: 'inside' }`, `{ listPos: 'outside' }`             |                               |
| **Image**          | `list-style-image: none`            | `list-image-none`                        | `{ listImg: 'none' }`                                         |                               |
| **Arbitrary Img**  | `list-style-image: url('/img.png')` | `list-image-[url('/img.png')]`           | `{ listImg: "url('/img.png')" }`                              |                               |
| **Var Image**      | `list-style-image: var(--i)`        | `list-image-(--i)`                       | `{ listImg: '--i' }`                                          | **Sugar**: Auto-detects `--`. |

## css: {} — Arbitrary CSS Escape Hatch

For CSS properties with no sz prop or Tailwind equivalent. Keys are camelCase; the compiler
converts to kebab-case. CSS custom properties (`--*`) are passed through unchanged.

```tsx
<div sz={{ p: 4, css: { writingMode: 'vertical-lr', touchAction: 'none' } }} />
// → p-4 [writing-mode:vertical-lr] [touch-action:none]

<div sz={{ hover: { css: { cursor: 'crosshair' } } }} />
// → hover:[cursor:crosshair]

<div sz={{ css: { '--my-color': 'red' } }} />
// → [--my-color:red]
```

TypeScript: `css?` is typed as `CSS.Properties` — full IDE autocomplete, typo protection.
Works inside `dynamic()` at runtime.

## sz Array Syntax

Pass an array to the `sz` prop to compose multiple sz objects with conditional items.
Static items are pre-computed at build time; conditional items use `_szMerge` at runtime:

```tsx
<div
  sz={[
    { flex: true, items: "center", p: 4 }, // always — extracted at build time
    isActive && { bg: "blue-500" }, // runtime conditional
    isDisabled && { opacity: 50, cursor: "not-allowed" },
  ]}
/>
```

## Reusing Styles

CSSzyx resolves style variables at build time — same output as inline objects, zero runtime.

```tsx
const card = { p: 6, rounded: 'xl', shadow: 'md' } as const;

sz={card}                          // direct — no override needed
sz={{ ...card, p: 4 }}             // spread — override p, keep rest
sz={[card, isActive && { bg: 'blue-50' }]}  // array — conditional composition
sz={on ? activeStyle : inactiveStyle}        // ternary — both branches resolved
sz={{ scale: shrunk ? 75 : 100 }}            // inline prop ternary — both literal values compiled at build time
```

**Rules:**

- Use `sz={var}` when no override needed (simpler)
- Use `sz={{ ...var, key: val }}` only when overriding/adding
- Variables in array elements, ternary branches, and chained initializers all resolve at build time
- `sz={{ key: cond ? a : b }}` — both literal branches compiled to static Tailwind classes; CSS variable fallback only when a branch is a runtime expression
- `sz={{ ...(cond ? a : b), static: val }}` — conditional spread hoist: compiler resolves both branches at build time
- Imported variables / function call results fall back to `_sz()` runtime — dev mode emits a build-time compiler warning explaining the fallback reason and suggesting `szv()` or `dynamic()`

Full guide: `/docs/reusing-styles`

## szv() — Variant Authoring

CVA-equivalent that returns sz objects. TypeScript infers valid keys/values from config — no
manual type annotations needed. Numeric variant keys are supported.

```tsx
import { szv } from "csszyx";

const buttonSz = szv({
  base: {
    inlineFlex: true,
    items: "center",
    rounded: "md",
    fontWeight: "medium",
  },
  variants: {
    variant: {
      default: { bg: "primary", text: "primary-foreground" },
      outline: { border: true, borderColor: "blue-500", bg: "transparent" },
      ghost: { hover: { bg: "accent" } },
    },
    size: {
      sm: { h: 9, px: 3, text: "sm" },
      md: { h: 10, px: 4 },
      lg: { h: 11, px: 8 },
    },
  },
  defaultVariants: { variant: "default", size: "md" },
});

<button sz={buttonSz({ variant: "outline", size: "sm" })} />;

// Numeric keys — e.g. index-based opacity variants
const itemSz = szv({
  base: { rounded: "sm", shrink: 0 },
  variants: {
    idx: { 0: { opacity: 50 }, 1: { opacity: 70 }, 2: { opacity: 90 } },
  },
  defaultVariants: { idx: 0 },
});
<div sz={itemSz({ idx: 1 })} />; // → "rounded-sm shrink-0 opacity-70"

// TypeScript catches invalid values:
buttonSz({ variant: "invalid" }); // ❌ TS error: '"invalid"' not assignable
```

All variant class combinations are catalogued at build time (compiler prescan) — Tailwind
generates CSS for every combination, no runtime injection needed.

## @csszyx/dynamic — Runtime CSS Injection

For styles from JSON / API / CMS / form renderer schemas:

```tsx
import { dynamic, preloadManifest } from "@csszyx/dynamic";
// or: import { dynamic } from 'csszyx/dynamic';

// Optional: preload at app startup for zero-latency first inject
await preloadManifest("/csszyx-manifest.json");

// Apply runtime sz object — CSS injected only for missing classes
const cls = dynamic({
  p: 4,
  bg: "white",
  hover: { bg: "gray-50" },
  dark: { bg: "gray-900" },
});
```

**Build-time extraction (Layer-1 prescan):** When `dynamic()` receives a static literal or
module-level const, the compiler extracts classes at build time → Tailwind generates CSS
ahead of time → no runtime injection needed. Works in Astro SSR without `client:*`.

```tsx
const boxStyles = { w: 7, h: 8, rounded: "sm" } as const;
<div className={dynamic(boxStyles)} />; // CSS pre-generated, zero runtime inject
```

### React hook

```tsx
import { useSz } from "@csszyx/dynamic/react";
// or: import { useSz } from 'csszyx/dynamic/react';

function DynamicCard({ style }) {
  const { sz } = useSz();
  return <div className={sz(style)} />;
}
```

Delta injection: CSS is injected only for classes not already in the pre-built stylesheet.
SSR-safe: on the server, returns class names without CSSOM access.

## Runtime Helpers

For dynamic classes at runtime (the only runtime overhead):

```tsx
import { _sz, _szIf, _szSwitch, _szMerge } from '@csszyx/runtime';

// Concatenate class strings
<div className={_sz('base-class', conditionalClass)} />

// Conditional class
<div className={_szIf(isActive, 'active-class', 'inactive-class')} />

// Switch/enum
<div className={_szSwitch(status, {
  loading: 'opacity-50',
  error: 'border-red-500',
  success: 'border-green-500',
})} />

// Merge (last wins for conflicts)
<div className={_szMerge(baseClasses, overrideClasses)} />
```

For color CSS variables:

```tsx
import { __szColorVar } from "csszyx/lite";
// Usage: __szColorVar('--ds-primary') → 'var(--ds-primary)'
//        __szColorVar('blue-500')      → 'var(--color-blue-500)'
//        __szColorVar('#ff0000')       → '#ff0000'
```

## SSR Hydration

CSSzyx validates that server and client use the same mangle map:

```tsx
// Server (Next.js app/layout.tsx)
import { initRuntime } from "@csszyx/runtime";
import { headers } from "next/headers";

const hdrs = await headers();
initRuntime({ checksum: hdrs.get("x-csszyx-checksum") ?? "" });
```

If the checksum mismatches, the runtime aborts hydration to prevent CSS corruption.

### szRecover — per-element recovery opt-in

By default a hydration mismatch aborts the entire page. For specific
subtrees where re-rendering on the client is cheaper than aborting,
opt in per-element with the `szRecover` JSX attribute:

```tsx
<section szRecover="csr">
  {/* mismatch in this subtree triggers a client re-render instead of abort */}
  <UserGeneratedContent />
</section>

<aside szRecover="dev-only">
  {/* same, but only in development; stripped from prod manifest */}
  <DebugPanel />
</aside>
```

The build emits a `data-sz-recovery-token` attribute on each element
plus a `<script id="__SZ_RECOVERY_MANIFEST__">` JSON tag in `<head>`.
The runtime's `verifyRecoveryToken` matches the two at hydration time.
The manifest stores both `checksum` (recovery token-set checksum) and
`mangleChecksum` (the value checked against the page `data-sz-checksum`).

`szRecover` is typed on `React.HTMLAttributes` via `@csszyx/types/jsx` —
no tsconfig change needed.

## Production Build (Mangling)

In production, class names are mangled for maximum compression:

```js
// vite.config.ts (production)
...csszyx({ production: { mangle: true } })
```

Output: `<div class="z y x" />` — the CSS `.z { padding: 1rem }` etc. is injected automatically.

### AST budget guard

Files larger than 50 000 AST nodes throw `ASTBudgetExceededError` at
build time — pathologically large generated files (json-as-ts fixtures,
GraphQL schemas) would otherwise hang the build. Raise the cap when you
need:

```js
...csszyx({ build: { astBudgetLimit: 100_000 } })
```

Or exclude the file from csszyx processing entirely before parsing:

```js
...csszyx({ exclude: ['src/generated/**', /icon-dump\.tsx$/] })
```

## Theme Auto-Scan (Custom Tokens → TypeScript Types)

When using Tailwind v4 `@theme` blocks for custom design tokens, enable `build.scanCss`
to generate `.csszyx/theme.d.ts` — surfaces custom tokens in `sz` prop IntelliSense.
Literal paths and simple globs are supported:

```ts
// vite.config.ts
...csszyx({ build: { scanCss: 'src/index.css' } })
```

```css
/* src/index.css */
@theme {
  --color-brand-500: #6d28d9;
  --spacing-prose: 65ch;
}
```

After the build, add `.csszyx/theme.d.ts` to your `tsconfig.json` `"include"` array.
Result: `{ bg: 'brand-500' }` gets autocomplete and type-checking.

## Tailwind v4 Compatibility

- Requires `@tailwindcss/vite` or `@tailwindcss/postcss` v4.x
- `csszyx` Vite plugin MUST come before `tailwindcss` in plugins array
- All spacing values are dynamic (any integer, 0.5-step decimals work bare)
- Arbitrary values: `{ p: '5px' }` → `p-[5px]` (auto-wrapped)
- CSS variables: `{ p: '--my-var' }` → `p-(--my-var)` (auto-wrapped)

## Migrate CLI

Convert `className=` (JSX/TSX) or `class=` (HTML) to `sz=` props:

### Basic usage

```bash
npx @csszyx/cli migrate src/           # migrate all JSX/TSX/HTML under src/
npx @csszyx/cli migrate --dry-run      # preview changes without writing files
npx @csszyx/cli migrate --ignore "**/*.test.tsx,**/fixtures/**"
npx @csszyx/cli migrate --pattern "src/components/**/*.tsx"
```

Migration logs are written to `.csszyx/logs/`. Add `.csszyx/` to `.gitignore`.

### Audit — discover unrecognized classes

```bash
npx @csszyx/cli migrate --audit        # scan + write .csszyx-todo.json (no file edits)
```

`.csszyx-todo.json` is a snapshot map of every class csszyx couldn't recognize.
Each entry starts as `"sz:todo"` (not yet decided):

```json
{
  "btn": "sz:todo",
  "custom-card": "sz:todo"
}
```

### `.csszyx-todo.json` resolution routes

Edit the file to tell csszyx what to do with each class:

| Value                      | Meaning                                          |
| -------------------------- | ------------------------------------------------ |
| `"sz:todo"`                | Not yet decided — skip, surface in reports       |
| `"sz:keep"`                | Keep in `className`, acknowledged as intentional |
| `"sz:remove"`              | Drop from output entirely                        |
| `{ p: 4, bg: 'blue-500' }` | Direct sz object — merge into sz prop            |
| `"p-4 bg-blue-500"`        | Tailwind string — auto-converted to sz           |
| `null` / `false`           | Same as `"sz:todo"` (backwards compat)           |

`sz:todo` entries always skip conversion — they are never silently parsed, even if
the class happens to be a valid Tailwind class. This prevents accidental conversion
of classes the developer has explicitly flagged as "not yet decided."

### Display utilities

`csszyx migrate` emits canonical display props, not boolean sugar:

| Tailwind      | Migrated sz                  |
| ------------- | ---------------------------- |
| `block`       | `{ display: 'block' }`       |
| `inline`      | `{ display: 'inline' }`      |
| `flex`        | `{ display: 'flex' }`        |
| `inline-flex` | `{ display: 'inline-flex' }` |
| `hidden`      | `{ display: 'none' }`        |

Manual authoring can still use `{ flex: true }`, `{ inlineFlex: true }`, etc.
The migrate command uses `display` so duplicate display utilities are visible as
one semantic CSS property. Conflicting display utilities in the same variant
scope, such as `block flex` or `md:block md:flex`, are left unresolved instead
of guessed. `flex flex-1` is safe and migrates to
`{ display: 'flex', flex: '1' }`.

### `--resolve-todos` — apply the resolution map

```bash
npx @csszyx/cli migrate --resolve-todos .csszyx-todo.json
```

Reads `.csszyx-todo.json` and applies it during migration.
`--resolve-todos` is **read-only**: it never writes to the todo file.
Still-unresolved classes appear in the console and log only.
Re-run `--audit` to get a fresh snapshot when ready.

### `--inject-todos` — mark unrecognized classes in code

```bash
npx @csszyx/cli migrate --inject-todos
```

Inserts `{/* @sz-todo: classname1, classname2 */}` above elements with unrecognized
classes — a visual marker so you can grep or skim the diff to find what still needs
attention. When `--resolve-todos` is active, `--inject-todos` is automatically enabled
for still-unresolved classes.

### Full workflow

```bash
# 1. Dry run to preview
npx @csszyx/cli migrate --dry-run

# 2. Audit to find unknowns
npx @csszyx/cli migrate --audit
# → writes .csszyx-todo.json

# 3. Edit .csszyx-todo.json
# → set "sz:keep", "sz:remove", or direct sz objects for each entry

# 4. Apply with resolution map
npx @csszyx/cli migrate --resolve-todos .csszyx-todo.json

# 5. Re-audit if anything remains unresolved
npx @csszyx/cli migrate --audit
```

### HTML files

Converts `class="..."` → `sz="..."`. FOUC prevention CSS is injected into
`<head>` by default. Runtime script injection is **opt-in** — without it,
`[sz]` elements stay hidden (FOUC CSS hides them until the runtime sets
`body.sz-ready`).

```bash
# CDN runtime (default URL: https://cdn.csszyx.com/runtime.js)
npx @csszyx/cli migrate public/ --inject-runtime cdn
# Local runtime (default path: csszyx-runtime.js)
npx @csszyx/cli migrate public/ --inject-runtime local
# Custom URLs
npx @csszyx/cli migrate public/ --inject-runtime cdn --cdn-url https://my-cdn.com/csszyx.js
npx @csszyx/cli migrate public/ --inject-runtime local --local-path ./vendor/csszyx-runtime.js
# Format and FOUC options
npx @csszyx/cli migrate public/ --braces    # sz="{ p: 4 }" instead of sz="p: 4"
npx @csszyx/cli migrate public/ --no-fouc  # skip FOUC prevention CSS injection
```
