skills.rest
GovTechSG
GovTechSGOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-utilities
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
GovTechSGGovTechSG
18

tailwind-mapping

Map SGDS CSS variables to Tailwind v4 utility classes with playground and Storybook documentation.

Official
Intermediate
theslashdojotheslashdojo

classes

Apply Tailwind utility classes to style HTML/JSX components with responsive variants.

Official
Intermediate
ihlamuryihlamury
73

rippling-ui-skills

Enforce Rippling UI design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate
caiohbfurtadocaiohbfurtado

tailwindcss

Apply Tailwind CSS v4 utility classes and theme variables to style web applications.

Community
Intermediate