ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBannerButtonButton GroupCalendarCard Updated CheckboxCollapsible New Combobox New Command MenuDate PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Add ButtonFilter DateFilter Date RangeFilter DropdownFilter FieldFilter InputFilter Reset ButtonFooterHeaderIconInputInput Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New PopoutProgressProgress BarQrcodeRadioRangeResizable New Scroll Area New Segmented ControlSelectSkeletonSpinnerStackTabTableTagTextareaTime Picker New Timestamp New ToastToggleTooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

Tailwind CSS

Style your application using Nord Design Tokens through Tailwind CSS utility classes.

Tailwind CSS Recommended

Use our Tailwind CSS integration for new Nord projects. It provides:

  • Modern utility-first approach with Tailwind CSS v4
  • Smaller bundle sizes through automatic purging
  • Excellent developer experience and IDE support
  • Wide industry adoption and community support
  • Full access to Nord Design Tokens as Tailwind theme variables
  • ESLint plugin for enforcing best practices and migration assistance
Get started with Tailwind

Developer tooling

The legacy CSS Framework and ESLint plugin are developer tooling pages. Keep using them for existing projects or migration support.

View CSS FrameworkView ESLint Plugin

Getting support

Need help choosing or using our CSS solutions? Please head over to the Support page for more information and ways to contact us.