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.
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}";
}