A categorical composition framework , similar to Tailwind, for sbox.
Not affiliated with the original Tailwind, but similar enough that you can reference the same documentation for properties.

Differences

Hover and active currently use "hover-" and "active-" prefixes (instead of "hover:" and "active:" respectively) due to some pending engine changes.
Most properties do not currently support custom values - only "bg-" and "font-" for now.

How to use it

Whatever panel component you use for UI should inherit "Sailwind.SailwindPanelComponent". Everything based on this root panel will then have access to Tailwind styles.

Example

@using Sandbox;
@using Sandbox.UI;
@inherits Panel
@namespace ShooterGame

<root>
    <column class="flex-col items-end bg-neutral-950">

        <div class="relative min-w-40 min-h-20 items-end text-6xl">

            @{ /* Background */ }
            <label class="absolute px-4 right-0 top-0 bottom-0 items-end opacity-25">
                054
            </label>

            @{ /* Foreground */ }
            <label class="absolute px-4 right-0 top-0 bottom-0 items-end">
                54
            </label>

        </div>

        @{ /* Bottom bar */ }
        <label class="text-sm uppercase bg-neutral-900 px-4 py-2 w-full items-end text-right">
            Health
        </label>

    </column>
</root>

@code
{
    protected override int BuildHash() => System.HashCode.Combine(Time.Now);

    public PlayerVitals PlayerVitals => Player.Local.Vitals;
    public string Health => $"{PlayerVitals.Health.CeilToInt()}";
    public string PaddedHealth => $"{PlayerVitals.Health.CeilToInt():D3}";
}

Package

Revision

Tags

Sailwind

Differences

How to use it