Output Formats

Nightfall exports to 6 formats. Pick the one that fits your stack.

CSS Variables (Default)

nightfall-generated.css
:root[data-theme="dark"],
.dark {
  --color-bg-page:  #0a0a0b;
  --color-bg-surface:  #141416;
  --color-bg-elevated:  #1e1e22;
  --color-text-primary:  #e5e7eb;
  --color-text-secondary:  #9ca3af;
  --color-border-default:  rgba(255, 255, 255, 0.1);
  --color-brand-primary:  #3b82f6;
}

Tailwind Config

npx nightfall-css generate --format tailwind

Generates a nightfall.tailwind.js you can spread into your Tailwind config.

All Formats

  • css-variables — CSS custom properties (default)
  • tailwind — Tailwind CSS config extension
  • scss — SCSS variables + color map
  • json-tokens — W3C Design Tokens format
  • figma-tokens — Figma Tokens plugin format
  • style-dictionary — Style Dictionary format