---
title: "@slot"
description: "Mark where a variant definition inserts the styled content."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# @slot

```css
@slot;
```

`@slot` marks where the block form of a variant definition inserts the
declarations of the utility. Write it in the body of
[@custom-variant](/docs/at-rules/custom-variant), or of a registry variant
definition.

### Stylesheet

```css
@custom-variant hocus {
  &:hover,
  &:focus-visible {
    @slot;
  }
}
```

### Source

```tsx
import { style } from "stillwind/react";

export const link = style("hocus:underline");
```

### Compiled code

```ts
export const link = {className:"sw_4x5c3"};
```

### Generated stylesheet without preflight

```css
/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer utilities {
  .sw_4x5c3:hover, .sw_4x5c3:focus-visible {
    text-decoration-line: underline;
  }
}
```

`@slot` belongs to variant definitions only.
[@stillwind-slot](/docs/at-rules/stillwind-slot) is a different at-rule: it
places generated CSS in your stylesheet.

Source: https://stillwind.dev/docs/at-rules/slot/index.mdx