> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/utilities/misc.md).

# Miscellaneous utilities

Single-purpose utilities: enlarged hit areas, child z-order, autofill and native-control resets, containment, and 3D helpers.

Single-purpose utilities: enlarged hit areas, child z-order, autofill and native-control resets, containment, and 3D helpers.

| Class                                                         | What it does                                                                                                 |
| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `hit-area-{size}`                                             | Enlarges the clickable area on every side by the given spacing value, using an invisible `::before` overlay  |
| `hit-area-{x\|y\|t\|b\|l\|r\|s\|e}-{size}`                    | Enlarges one axis or one side (`s` / `e` follow text direction)                                              |
| `hit-area-*-before` / `hit-area-*-after`                      | Selects the pseudo-element used for the overlay when `::before` is taken                                     |
| `hit-area`                                                    | The bare overlay with no growth. Feed it sides through the `--hit-area-{top\|right\|bottom\|left}` variables |
| `reverse-z-stack` / `-reverse-z-stack`                        | Gives the first 20 children descending positive / negative `z-index`, so earlier children paint on top       |
| `translate-z-{size}`                                          | `translateZ()` composed with Tailwind's other transform utilities                                            |
| `hide-search-clear`                                           | Hides the browser's built-in clear button on `<input type="search">`                                         |
| `reset-webkit-autofill`                                       | Defers WebKit's yellow autofill background for 5000s, so the field keeps its own colors                      |
| `webkit-autofill-bg-{color}` / `webkit-autofill-text-{color}` | Sets the background / text color of an autofilled field                                                      |
| `contain-{layout\|paint\|size\|style\|content\|strict\|none}` | The CSS `contain` property                                                                                   |
| `backface-visible` / `backface-hidden`                        | `backface-visibility`, with vendor prefixes                                                                  |
| `clip-path-shape-[…]`                                         | `clip-path` with an arbitrary value                                                                          |
| `col-span-[…]`                                                | `grid-column: span n` with an arbitrary value, so a CSS variable can drive the span                          |
| `scrollbar-hide`                                              | Hides scrollbars while the element stays scrollable (from `tailwind-scrollbar-hide`)                         |

Two plugins style native controls globally, with no class to apply: the form reset removes the default outline and appearance from text inputs, textareas, selects, checkboxes, and radios (the theme's field snippets draw their own focus styles), and the number-input reset removes the spin buttons from `<input type="number">`.

## Examples

### Enlarging tap targets

Use `hit-area-{size}` to grow a small control's clickable area without changing its layout:

```html
<button aria-label="{{ 'other.accessibility.close' | t }}" class="size-icon hit-area-r4">
  {% render 'core-icon', icon: 'stroke-bare-x' %}
</button>
```

Touch targets need 44×44px minimum. For asymmetric growth, the bare `hit-area` class takes per-side variables:

```html
<button class="hit-area [--hit-area-top:var(--btn-padding)] [--hit-area-bottom:var(--btn-padding)]">…</button>
```

### Reversing paint order

Use `reverse-z-stack` when earlier children must paint on top of later ones:

```html
<div class="grid-stack reverse-z-stack">
  {{ background_layers }}
</div>
```

`core-section-background` stacks its media, overlay, and decoration layers this way, so the layer rendered first stays visible on top.

### Hiding the native search clear button

Use `hide-search-clear` on a search input that has its own clear control:

```html
<input type="search" class="hide-search-clear" name="q">
```

### Styling autofilled fields

Use the `webkit-autofill-*` utilities to stop WebKit's yellow autofill flash:

```html
<input type="email" class="webkit-autofill-bg-transparent webkit-autofill-text-content">
```

`webkit-autofill-bg-{color}` paints the background with an inset box shadow because WebKit ignores `background-color` on autofilled fields.

## Customizing

`hit-area-*` and `translate-z-*` take any spacing value, including the `r1–r15` steps. See [Spacing](/reference/utilities/spacing.md). The form and number-input resets live in `tailwind/form-reset.ts` and `@groupthought/assembly-ui/tailwind`; the rest of this page is defined in `tailwind/` next to `tailwind.config.ts`.