Getting StartedSetup and authoring guides 3
ToolsStarters and interactive helpers 2
ReferenceAPIs, styling contracts, and runnable examples 3

Styling and token model

TailNG themes are split into primitive collections and semantic collections. Primitive values are the low-level design scales; semantic values are the product-facing contract that wrappers and docs consume.

Primitive collections

color

Foundational palette values used as references inside semantic scales.

primary500, neutral900, danger500

spacing

Spacing ramp used by wrappers, layouts, and exported utility adapters.

space2, space4, space8

radius

Corner radius scale for shells, panels, and rounded affordances.

sm, md, xl

typography

Font-size and typographic tokens exposed to CSS variables and Tailwind.

textSm, textBase, textLg

motion

Transition durations and motion utilities shared by wrappers and utilities.

durationFast, durationBase, durationSlow

Semantic collections

background

Surface and canvas colors that define page, panel, and muted surfaces.

base, canvas, surface

foreground

Readable text colors for primary, secondary, muted, and inverse content.

primary, secondary, inverse

border

Border strengths for shells, separators, and emphasis states.

default, subtle, strong

accent

Brand and state accents used by actions, status surfaces, and emphasis treatments.

brand, success, warning

focus

Focus ring tokens that keep keyboard states aligned with the current theme.

ring

Resolve token references

ts
import { resolveToken } from '@tailng-ui/theme';

const surface = resolveToken(theme, '{semantic.background.surface}');
const brand = resolveToken(theme, '{accent.brand}');
const spacing = resolveToken(theme, '{spacing.space4}');

CSS variable output

Use toCssVars() when your app owns the scope that should receive the theme. Export only semantic values, only primitive values, or both depending on how much styling the host owns.

Generate variables

ts
import { defaultDarkThemePreset, toCssVars } from '@tailng-ui/theme';

const semanticVars = toCssVars(defaultDarkThemePreset, {
  includePrimitives: false,
});

Semantic variable excerpt

css
:root {
  --tng-semantic-background-base: #172033;
  --tng-semantic-background-canvas: #0b1020;
  --tng-semantic-background-surface: #1f2a3d;
  --tng-semantic-foreground-primary: #ffffff;
  --tng-semantic-foreground-secondary: #cbd5e1;
  --tng-semantic-border-default: #3d4c63;
  --tng-semantic-accent-brand: #60a5fa;
  --tng-semantic-accent-success: #4ade80;
  --tng-semantic-focus-ring: #60a5fa;
}

Component contract CSS

The package also exposes component contract styles. Import the full bundle when you want the whole styled wrapper layer, or import a single contract when a feature owns only a subset.

All contracts

css
@import '@tailng-ui/theme/component-contracts/index.css';

Single contract

css
@import '@tailng-ui/theme/component-contracts/button.css';

Tailwind adapter

When Tailwind utilities own spacing and composition, project the same theme definition into your Tailwind config. That keeps colors, spacing, radii, and motion values aligned with the preset used by the rest of the app.

Create a Tailwind preset

ts
import type { Config } from 'tailwindcss';
import { atlasThemePreset, toTailwindPreset } from '@tailng-ui/theme';

const tailngTheme = toTailwindPreset(atlasThemePreset);

export default {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {
      ...tailngTheme.theme.extend,
    },
  },
} satisfies Config;