---
title: "Sailwind - s&box library"
description: "A class-based UI framework for s&box, similar to Tailwind"
canonical: "https://sbox.watch/libraries/alex/sailwind/"
generated_at: "2026-07-22T23:18:23.253Z"
---

# Sailwind

A class-based UI framework for s&box, similar to Tailwind

- Type: library
- Ident: alex.sailwind
- Creator: Alex
- Canonical: https://sbox.watch/libraries/alex/sailwind/
- Markdown: https://sbox.watch/libraries/alex/sailwind.md
- sbox.game: https://sbox.game/alex/sailwind/
- Generated: 2026-07-22T23:18:23.253Z

## Stats

- 24h momentum: +0
- Terry score: 71%
- Favorites: 17
- Upvotes: 16
- Downvotes: 2
- Updated: Feb 13, 2025
- Created: Dec 14, 2024
- Size: 44.1 KB
- Files: 26
- Tags: ui

## Description

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



## More by Alex

| Package | Ident | Players | Favorites | Upvotes | Score | Markdown |
| --- | --- | --- | --- | --- | --- | --- |
| Retro Shading Model | alex.rsm | 0 | 15 | 15 | 85% | https://sbox.watch/libraries/alex/rsm.md |
| Iconify | alex.iconify | 0 | 15 | 13 | 83% | https://sbox.watch/libraries/alex/iconify.md |
| Screen Space God Rays | alex.screenspacegodrays | 0 | 6 | 6 | 69% | https://sbox.watch/libraries/alex/screenspacegodrays.md |
| Quick Asset Menu | alex.quickassetmenu | 0 | 4 | 7 | 72% | https://sbox.watch/libraries/alex/quickassetmenu.md |