Sailwind

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