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

tailwind-mapping

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

18|10|Updated Aug 30, 2022
Search Tags:#storybook#tailwind#mapping#playground#css-variables#utility-classes#sgds
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill tailwind-mapping
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-mapping
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/.github/skills/tailwind-mapping
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill tailwind-mapping

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SGDS CSS variables mapped to Tailwind utility classes, enabling consistent design tokens and faster frontend styling.

Core Features & Use Cases

  • Converts SGDS CSS variables into Tailwind v4 utilities following a defined naming pattern.
  • Generates corresponding playground documentation in playground/utility/ and ensures live previews for new mappings.
  • Supports creating and updating a Storybook documentation workflow for utilities.

Quick Start

Add a new SGDS token mapping by updating src/css/utility.css and creating a live playground HTML demo in playground/utility/ along with a Storybook story in stories/utilities/.

Frequently Asked Questions about tailwind-mapping

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

FAQPage Schema
How do I map SGDS CSS variables to Tailwind utility classes?▼

Map SGDS CSS variables to Tailwind utility classes by updating src/css/utility.css with defined naming patterns, generating live playground HTML demos in playground/utility/, and creating Storybook stories in stories/utilities.

What do I need to generate Tailwind utility documentation for SGDS tokens?▼

Generating Tailwind utility documentation requires existing theme CSS files, a live playground HTML demo in playground/utility/, and a Storybook story in stories/utilities/ to ensure live previews for new mappings.

Can I use this to create live previews for new spacing and color utilities?▼

Yes, you can create live previews for new spacing, color, and typography utilities by mapping SGDS CSS variables to Tailwind v4 utilities and generating corresponding playground HTML demos and Storybook stories.

What's the best way to implement color and typography utilities with Tailwind v4 and SGDS?▼

The best way to implement color and typography utilities is converting SGDS CSS variables into Tailwind v4 utilities following a defined naming pattern, then generating playground documentation and Storybook stories for live previews.

Does this workflow support updating existing Storybook documentation for utilities?▼

Yes, the workflow supports creating and updating Storybook documentation for utilities by mapping SGDS CSS variables to Tailwind v4 utility classes and generating corresponding playground documentation with live previews.

Why do I need a playground HTML demo when adding new Tailwind mappings?▼

A playground HTML demo in playground/utility/ is required when adding new Tailwind mappings to ensure live previews for the newly mapped SGDS CSS variables and maintain consistent design tokens across the Storybook documentation.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio

tailwind-impl-config-v4

Configure Tailwind CSS v4 via CSS-first model for Vue and Svelte projects.

Official
Advanced
kaustubhhiwarekaustubhhiware

playground

Generate interactive HTML playgrounds with visual controls and live previews.

Community
Advanced
angelgarciasolorzanoangelgarciasolorzano

tailwindcss-development

Apply Tailwind CSS utility classes and responsive design patterns to HTML templates.

Community
Advanced
dimitri-vsdimitri-vs

tailwindcss-fundamentals-v4

Teach Tailwind CSS v4 CSS-first theme configuration and custom utility authoring.

Community
Intermediate