Concepts

Tailwind preset

Optional. @silverpoint/tailwind names the charts' public --sp- variables as theme tokens, so the rest of your page can use the ink, the substrate and the typeface of the ground your charts are drawn on. silverpoint never requires Tailwind.

Install

shell

npm install @silverpoint/tailwind

Tailwind 4

css

@import 'tailwindcss';
@import '@silverpoint/grounds/styles.css';
@import '@silverpoint/tailwind/theme.css';

Tailwind 3.4

// tailwind.config.js
import silverpoint from '@silverpoint/tailwind';

export default {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  presets: [silverpoint],
};

Utilities

Utilities	Tokens	Reads
bg-, text-, border-, ring- …	sp-substrate, sp-ink, sp-ink-secondary, sp-heighten, sp-rule, sp-grid, sp-text, sp-text-muted	`var(--sp-<token>)`
`font-sp-display`		`var(--sp-font-display)`
`rounded-sp`		`var(--sp-radius)`

html

<section class="sp-ground-cyanotype bg-sp-substrate text-sp-text font-sp-display rounded-sp p-4">
  <h2 class="border-b border-sp-rule">Operations</h2>
  <!-- charts … -->
</section>