Skip to content

@apply

Insert the declarations of utilities, including their variants, into a rule of your stylesheet.

View as Markdown 
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

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

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 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 instead.