Skip to content

@stillwind-require-properties

Make a utility emit the registrations of custom properties that it needs.

View as Markdown 
@utility name {
  @stillwind-require-properties --name --other;
}

@stillwind-require-properties adds registrations to the requirements of a utility. When a module uses the utility, the stylesheet emits each listed registration. Write it in the body of a utility definition. Separate several names with spaces.

Example

spin-* only sets --spin-angle, and another rule reads it. Without the requirement, the stylesheet would not emit the registration, because the default activation waits for a var() reference.

Stylesheet

@stillwind-property --spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@utility spin-* {
  @stillwind-require-properties --spin-angle;
  --spin-angle: --value([angle]);
}

Source

import { style } from "stillwind/react";

export const icon = style("spin-[45deg]");

Compiled code

export const icon = {className:"sw_7ic77"};

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_7ic77 {
    --spin-angle: 45deg;
  }
}

@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 {
      --spin-angle: 0deg;
    }
  }
}

@property --spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

Errors

Each name must be a complete custom property name that starts with --. The compiler reports an invalid name as SW14003 in your stylesheet. When a module uses a utility with an invalid name, the compiler reports SW14004, including for plugin utilities.

A required name needs a @stillwind-property registration in the loaded stylesheets. A missing registration is SW14005.