# Custom Tailwind Variants

Decanter adds several custom variants in `tw.config.js` via `addVariant`. These variants enable shorthand and grouping for common pseudo-state patterns.

## Hocus Variants
- **hocus**: Applies styles on both hover and focus (`&:hover`, `&:focus`).
- **hocus-visible**: Applies styles on hover and when element matches `:focus-visible` (`&:hover`, `&:focus-visible`).

Usage example:
```html
<button class="hocus:bg-cardinal-red">Background changes to cardinal red on hover or focus</button>
```

## Group Hocus Variants
- **group-hocus**: Targets child when parent `.group` is hovered or focused (`:merge(.group):hover &`, `:merge(.group):focus &`).
- **group-hocus-visible**: Similar to `group-hocus` but uses `:focus-visible`.
- **group-hocus-within**: Applies when parent `.group` is hovered or any child has focus (`:merge(.group):hover &`, `:merge(.group):focus-within &`).

Usage example:
```html
<div class="group">
  <p class="group-hocus:text-digital-blue">Text changes on group hover/focus</p>
</div>
```

## Children Variants

> **Deprecated.** These are removed in v8. Tailwind added the `*:` variant in v3.4.0,
> which generates the same selectors:
>
> | Deprecated | Use instead | Selector |
> | --- | --- | --- |
> | `children:` | `*:` | `& > *` |
> | `children-hover:` | `hover:*:` | `& > *:hover` |
> | `children-focus:` | `focus:*:` | `& > *:focus` |
> | `children-focus-visible:` | `focus-visible:*:` | `& > *:focus-visible` |
>
> Prefixes and stacking carry over unchanged — `sm:children:` becomes `sm:*:`,
> `last:children:` becomes `last:*:`.
>
> **Put the state variant first.** `hover:*:` is `& > *:hover` (what `children-hover:`
> did); `*:hover:` is `&:hover > *` — every child of a hovered *parent*, which is a
> different thing.

- **children**: Targets all direct children (`& > *`).
- **children-hover**: Targets direct children on hover (`& > *:hover`).
- **children-focus**: Direct children when focused (`& > *:focus`).
- **children-focus-visible**: Direct children on `:focus-visible` (`& > *:focus-visible`).

Usage example:
```html
<!-- Deprecated -->
<div class="children-hover:text-cardinal-red">
  <button>Child 1</button>
  <button>Child 2</button>
</div>

<!-- Use instead -->
<div class="hover:*:text-cardinal-red">
  <button>Child 1</button>
  <button>Child 2</button>
</div>
```