Get Started

DS9 is distributed as a private npm package under the @skyltmax github organization.

Install

Install package

pnpm add @skyltmax/ds9

Add Tailwind plugin

The plugin adds some base styles and extends the theme with DS9-specific classes.

tailwind.config.js

module.exports = {
  plugins: [
    require("@skyltmax/ds9/tailwind").plugin,
  ],
}

Add package to Tailwind content

Add the path to the installed package to the content in your Tailwind config to make sure the classes used by the DS9 components are included in the generated CSS.

tailwind.config.js

module.exports = {
  content: [
    "./node_modules/@skyltmax/ds9/**/*.js",
  ],
}

Add class to HTML document

Add the ds9 class to the <html> element in your HTML document. This applies the DS9 typography and dark mode styles.

index.html

<html class="ds9">

Introduction Colors