About
Sailwind
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}";
}
