tailwind-mapping
Tailwind Mapping
Conversion Pattern
--sgds-{category} → --{property}-{category} → sgds:{property}-{category}
| SGDS Variable Pattern | Tailwind Property | Generated Class |
|---|---|---|
--sgds-{v}-bg-{m} |
--background-color-{v}-{m} |
sgds:bg-{v}-{m} |
--sgds-{v}-surface-{m} |
--background-color-{v}-surface-{m} |
sgds:bg-{v}-surface-{m} |
--sgds-{v}-color-{m} |
--text-color-{v}-{m} |
sgds:text-{v}-{m} |
--sgds-{v}-border-color-{m} |
--border-color-{v}-{m} |
sgds:border-{v}-{m} |
--sgds-line-height-{m} |
--leading-{m} |
sgds:leading-{m} |
--sgds-font-size-{m} |
--text-{m} |
sgds:text-{m} |
--sgds-spacer-{m} |
--spacing-{m} |
sgds:m-{m}, sgds:p-{m}, etc. |
See reference/conversion-rules.md for full per-category details (form colors, typography types, modifiers).
More from govtechsg/sgds-web-component
sgds-components
Complete reference for all SGDS web components including installation and framework integration. Use when users ask about any <sgds-*> component — accordion, alert, badge, breadcrumb, button, card, checkbox, close-button, combo-box, datepicker, description-list, divider, drawer, dropdown, file-upload, footer, icon, icon-button, icon-card, icon-list, image-card, input, link, mainnav, masthead, modal, overflow-menu, pagination, progress-bar, quantity-toggle, radio, select, sidebar, sidenav, skeleton, spinner, stepper, subnav, switch, system-banner, tab, table, table-of-contents, textarea, thumbnail-card, toast, or tooltip. Also covers React 19+, React ≤18, Vue, Angular, and Next.js integration.
64sgds-forms
Use this skill when users ask about form validation in SGDS, hasFeedback prop, constraint validation, custom validation, noValidate, setInvalid, form submission, or reading FormData from SGDS form components.
60sgds-getting-started
Starting point for any new application built with the SGDS web component library. Apply this skill first whenever a user is bootstrapping a new SGDS project, setting up a new app, or asking where to begin with SGDS. Covers font setup, foundation CSS, utilities, components, and app layout in the correct order.
60sgds-theming
Customising the visual theme of an SGDS application — product brand colours, day/night mode, and font. Use when users ask about changing the primary colour, theming their app, enabling dark mode, night mode, overriding CSS tokens, or customising the font. Apply this skill whenever theming, branding, or CSS token overrides are mentioned.
60sgds-workflow
ALWAYS use this skill when building UI with @govtechsg/sgds-web-component or when a user mentions SGDS or Singapore Design System — even if they don't explicitly ask for help. This is the mandatory entry point for all SGDS development: it guides you to the right skill for setup, components, utilities, forms, theming, page layouts, block templates, and data visualisation. Read this before writing any SGDS application code.
59sgds-data-visualisation
Use this skill when users ask about data visualisation, charts, graphs, or dashboards in an SGDS application. Covers ECharts setup and applying the SGDS colour palette to charts.
59