---
title: "@apply"
description: "Insert the declarations of utilities, including their variants, into a rule of your stylesheet."
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.

# @apply

```css
selector {
  @apply utilities;
}
```

`@apply` replaces itself with the declarations of the listed utilities. Write it
inside a style rule or a utility definition. Whitespace separates the utilities.

## Example

### Stylesheet

```css
.button {
  @apply rounded-md px-4 py-2 hover:bg-blue-600 focus-visible:outline-2;
}
```

### 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 theme {
  :root, :host {
    --color-blue-600: oklch(54.6% .245 262.881);
    --spacing: .25rem;
    --radius-md: .375rem;
  }
}

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-outline-style: solid;
    }
  }
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

.button {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  border-radius: var(--radius-md);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-600);
    }
  }

  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
}
```

A utility with variants becomes nested rules, and the selector of the enclosing
rule takes the place of the generated class. Utilities without variants come
first in utility order. Utilities with variants follow in variant order.

The stylesheet declares the theme values and registered properties that the
applied utilities need, as it does for `style()`.

## Rules

- A utility that does not resolve adds nothing. `.button { @apply unknown-x; }`
  becomes `.button {}`.
- An applied utility can apply other utilities. A circular application is a
  compilation error.
- In a utility definition, `@apply` expands after the variants of the utility
  apply, so the applied declarations stay under them.
- `@apply` adds no class to any element. `@apply group` does not make the
  element a `group` for `group-hover:`.

To apply a condition to your own declarations, use
[@variant](/docs/at-rules/variant) instead.

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