Getting started · Installation
Getting started

Installation

There is no tailwind.config.js. theme.css is the configuration.

Astro or Vite + React, with Tailwind v4

/* src/styles/app.css — the only CSS entry point */
@import "@ss/config/tailwind/theme.css";

That single import brings Tailwind v4, the font, all three token layers, the density modes, the base layer and the custom utilities. Tailwind v4 only scans the importing project's own sources, so each app adds its own @source line for anything outside src/.

Anything without Tailwind

Previews, react-admin, email templates, this page. tokens.css is a plain-CSS mirror of the same values, with no build step.

<link rel="stylesheet" href="tokens.css">
Known drift

_ds_bundle.css in the synced design-system export still carries an older palette (#fafafa, #1a1a1a, and --color-border-strong: #d4d4d4 — a 1.6:1 input border that has since been corrected to 3.06:1). Do not link it. This site builds its tokens from theme.css and loads nothing else.

Set a density

Every app root declares one. A component never branches on which surface it is on — it uses the named spacings and inherits the mode.

<body data-density="comfortable">   {/* www, /business/ */}
<body data-density="default">       {/* app, business dashboard */}
<body data-density="compact">       {/* feedback, dense panels */}
Sporting Scouter Design System
Every token on this site is generated from theme.css.