sgds-utilities

Document SGDS sgds: Tailwind v4 utility classes for consistent adoption.

18|10|Updated Aug 30, 2022

Search Tags:#documentation #css #reference #utilities #tailwind #sgds

Ready to run

npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-utilities

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sgds-utilities
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-utilities
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-utilities

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SGDS utilities provide a complete, cross-framework reference of all sgds: Tailwind utilities, enabling teams to adopt consistent, theme-aware styles with minimal setup.

Core Features & Use Cases

Comprehensive references for background, text, border, border-radius, typography, spacing, grid, dimension, opacity, and color utilities.
Clear setup guidance including importing utility.css and theme files, plus practical usage patterns and framework integration examples.
Real-world use cases and ready patterns for fast UI prototyping and design-system adoption.

Quick Start

Install the SGDS utility CSS and theme assets in your project and start applying sgds: classes in your UI.

Frequently Asked Questions about sgds-utilities

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What are SGDS utility classes and how do they work with Tailwind v4?▼

SGDS utility classes are Tailwind v4-based styles prefixed with sgds: that provide cross-framework, theme-aware references for backgrounds, text, borders, spacing, grids, and typography. They enable teams to adopt consistent design-system styles with minimal setup.

How do I set up SGDS utility classes in my project?▼

To set up SGDS utilities, install the SGDS utility CSS and theme assets in your project, import the utility.css and theme files, and start applying sgds: prefixed classes directly in your UI markup for fast prototyping.

Can I use SGDS utilities with different frontend frameworks?▼

Yes, SGDS utilities provide a cross-framework reference, enabling consistent application of sgds: utility classes for components, grids, spacing, typography, and color across various frontend setups and framework integrations.

What is the best way to apply consistent theming using Tailwind utilities?▼

The best way to apply consistent theming is by importing the SGDS theme files alongside utility.css, allowing your team to use theme-aware sgds: prefixed classes for backgrounds, text, borders, and color utilities across the application.

Which utility categories are covered by the SGDS Tailwind reference?▼

The SGDS Tailwind reference covers comprehensive utility categories including background, text, border, border-radius, typography, spacing, grid, dimension, opacity, and color utilities for design-system adoption.

Why do I need a cross-framework reference for Tailwind utility classes?▼

A cross-framework reference for Tailwind utility classes solves the problem of inconsistent styling by providing ready patterns and practical usage examples, ensuring teams adopt theme-aware SGDS styles uniformly across different project setups.