Kostom.net

Introduction


Whirl USS-Framework is an utility-first styling framework built specifically for Unity UI Toolkit, inspired by the workflow and flexibility of TailwindCSS — but redesigned to work inside Unity’s USS ecosystem.

Whirl scans your C# scripts and UXML files, detects every utility you use, and generates an optimized USS file containing only the styles your project needs. This keeps your stylesheet clean, fast, and highly maintainable.

Because Unity USS does not support many CSS features, Whirl introduces its own system built around ScriptableObject-based utilities, themes, and components, giving you a powerful way to structure styles without relying on unsupported syntax.

Whirl brings modern CSS-style power to UI Toolkit through:
  • Utility-first design for rapid UI development
  • Pseudo-classes for interactive states like hover and focus
  • Media queries for responsive layouts (Custom-handled)
  • Responsive utilities
  • Directives for conditional styling and theming
  • Custom components for reusable UI elements
  • ScriptableObject-based “functions” (instead of @apply, @theme, @utility, @component)
  • Arbitrary values support
  • Unity-specific utilities
  • Child selectors
  • And more...

Why WhirlUSS?

  • Tailwind-like development inside Unity
        Utility-first classes to build UI fast.
  • Automatic scanning & generation
        Only utilities that appear in your UXML or scripts are compiled.
  • ScriptableObject-driven styling
        Replaces Tailwind directives like @apply, @theme, and @component.
  • Highly modular
        Create multiple compiler profiles to separate editor, runtime, or package utilities.
  • Works with UI Toolkit natively
        No hacks, no custom renderers — just clean USS.

How it Works

  • You write utilities like:
    <Label class="text-xl p-4 hover:bg-red-500"/>
  • Whirl scans your project paths (configured in Whirl Compiler Settings).
  • Detects all used utilities, Media queries, Themes, Component, Utility combos in UXML and C# scripts.
  • It generates a single clean output USS file containing only what you used.

ScriptableObject Functions

Replacing Tailwind’s @apply, @theme, @utility, @component. Unity cannot parse custom @directives in USS, so Whirl uses ScriptableObjects:

TailwindWhirlUSS
@applyUtilityCombo
@themeTheme
@utilityStyleUtility
@componentStyleComponent
Create them via: Right-click → Create → Kostom → Styles → …