SGDS Utilities

The Utilities API — a set of atomic classes powered by Tailwind v4, scoped under the sgds: prefix. Developers apply SGDS design decisions directly in markup using this syntax rather than writing custom CSS.

Core Concept: sgds: Prefix

All SGDS utility classes use the sgds: prefix (Tailwind v4 @theme syntax):

<!-- ✅ Correct -->
<div class="sgds:p-4 sgds:bg-primary-default sgds:text-white">Content</div>

<!-- ❌ Wrong - missing prefix -->
<div class="p-4 bg-primary-default text-white">Content</div>

Required Setup

Import Utility CSS