Skip to content

@slot

Mark where a variant definition inserts the styled content.

View as Markdown 
@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, or of a registry variant definition.

Stylesheet

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

Source

import { style } from "stillwind/react";

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

Compiled code

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

Generated stylesheet without preflight

/*! 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 is a different at-rule: it places generated CSS in your stylesheet.