Kostom.net

Using Utility Classes


Whirl USS-Framework uses a utility-first workflow similar to TailwindCSS, but fully adapted for Unity’s UXML + USS ecosystem.

Instead of writing long custom USS files, you use short utility classes directly inside your UXML. Whirl scans your UXML, C# scripts, and scriptable utility files and generates only the utilities you actually use.

Adding Utilities in UXML

Just place utility classes inside the class attribute:

<Label class="text-16 font-bold padding-4 bg-gray-200" />

Whirl automatically detects these classes during compilation and injects the correct USS rules into your generated USS file.

However, there's an important detail to keep in mind, because Unity doesn’t support some CSS characters, Whirl uses a safe naming system:
SymbolAlternative
:---
[_b_
]_B_
/_s_
(_p_
)_P_
,_c_
*_st_
>_gt_
&_and_
I know memorizing this can be cumbersome; that’s why I created a helper tool that can be found by navigating to Tools > WhirlUSS > Converter. The converter tool makes it possible for you to type in a standard manner, e.g `hover:m-4`, and it gives you the UI Builder equivalent.

Example in UXML:

<Button class="p-4 hover---bg-blue-500 lg---bg-violet-500"/>

This is only necessary when writing utility classes directly in UXML/through the UI Builder. When using utilities inside C# scripts or ScriptableObjects, you can use the normal naming convention with special characters.

You should add a class to a VisualElement through C# script by calling the .AddClass(...) extension method, it would handle the conversion for you automatically.

Example in C#

using UnityEngine.UIElements;
using Kostom.styles;
...



element.AddClass("text-16", "hover:text-20", "lg:hover:text-[40px]")

As long as your WCS has its script search paths set, these utilities will be included in the final stylesheet.

Style Functions

Functions are similar to Tailwind’s functions and directives; however, since CSS directives are not allowed in Unity USS, they were replaced with scriptable objects.

To use the functions, you need to add them to the WhirlCompilerSettings.

StyleUtility (replaces @utility)

StyleUtilities are ScriptableObjects that let you create your own custom utility classes, similar to Tailwind's @utility directive. Create a Style Utility ScriptableObject via Right-click → Create → Kostom → Styles → Style Utility.

Inside the Style Utility, you can define the utility class name and add USS properties to it.

For example:
selector: card
properties:
	- padding: 12px
	- background-color: #f3f4f6
	- border-radius: 8px

This would create a utility class named card that you can use in your UXML or C# scripts like any other utility class:
<VisualElement class="card"/>
<VisualElement class="hover---card"/>

// or in C#
element.AddClass("card");
element.AddClass("hover:card");

Utility Combos (Like @apply)

Utility Combos let you group multiple utility classes into a single reusable class, similar to Tailwind's @apply directive. Create a Utility Combo ScriptableObject via Right-click → Create → Kostom → Styles → Utility Combo.

Inside the Utility Combo, you can add multiple utility classes that will be grouped together. For example, you could create a "btn-primary" combo that includes padding, background color, text color, ..., without state. This can then be used on UXML as a single class or even with states like hover:btn-primary.

Once created, you can use the combo class directly in your UXML or C# scripts like any other utility class.

For example:
selector: btn
apply:
	- px-4
	- py-2
	- bg-blue-200
	- text-white
	- rounded-md

Use it like this:
<Button class="btn"/>
<Button class="hover---btn"/>

// or in C#
element.AddClass("btn");
element.AddClass("hover:btn");

Component (Like @component)

Style Components allow you to define reusable styles for specific UI components, somewhat similar to Tailwind's @component directive.

I said somewhat because the Style Component look just like the Utility Combo, but what makes it different is that you can define states in it.

Inside the Style Component, you can define styles for specific UI elements, including default styles and state-based styles (like hover, active, etc.).

For example, you could create a "card" component that defines styles for a VisualElement with padding, background color, border radius, and hover effects.

Once created, you can use the component class directly in your UXML or C# scripts like any other utility class.

Create a Style Component ScriptableObject via Right-click → Create → Kostom → Styles → Style Component.

For example:
selector: card
Components:
	- hover:p-4
	- bg-blue-100
	- lg:hover:bg-violet-100