Kostom.net

Arbitrary


Whirl USS-Framework supports Arbitrary Values and Arbitrary Properties, allowing you to use any custom value even if it isn’t part of Whirl’s predefined utilities or theme tokens.

This works similarly to TailwindCSS v4, but adapted to Unity’s restrictions and USS limitations. Unity USS has limited built-in functionality, and not every property/value combination can be predefined. Arbitrary let you:

  • Use any color, including hex, rgba
  • Use any length, including px, %
  • Custom values for your custom control or niche values not added to whirl
  • Prototype quickly without creating new utilities

Syntax in Scripts & UXML

There are lists of symbols not supported by Unity UI Toolkit yet, which means substitute symbols need to be created. Check the Using Utility Classes section for more information on the substitute symbols.

Substitute symbols are only for use when directly modifying the uxml file or through the UI Builder. However, regular symbols like hover:bg-red can be used when using Element.AddClass(...) in C# or through the ScriptableObject Functions.

Also spaces should be replace with _ e.g, border-[2px_dashed_red]

Arbitrary Values

Whirl supports arbitrary values for any property that the compiler recognizes and can also be used with states and pseudo-classes, e.g: 
//value arbitrary
bg-[#ffff] //background-color: #ffff;
bg-[var(--color-red-200)] //background-color: var(--color-red-200);
text-[#ff00ff] //color: #ffff;
text-[20px] //font-size: 20px;

Arbitrary Properties

Whirl supports arbitrary properties for any uss property that wasn't included in Whirl and can also be used with states and pseudo-classes, e.g: 
//value properties
[background-color: #ffff] //background-color: #ffff;
hover:[background-color: var(--color-red-200)]
[color: #ff00ff] //color: #ffff;
[font-size: 20px] //font-size: 20px;