Tailwind Config

Export as a Tailwind CSS theme extension with dark mode colors.

Generate

npx nightfall-css generate --format tailwind --output nightfall.tailwind.js

Output Example

nightfall.tailwind.js
// Generated by Nightfall CSS v0.1.0
// Direction: light → dark | Preset: neutral

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        background: {
          DEFAULT: 'oklch(0.13 0.005 240)',
          surface: 'oklch(0.17 0.005 240)',
          elevated: 'oklch(0.21 0.005 240)',
          overlay: 'oklch(0.25 0.005 240)',
        },
        foreground: {
          DEFAULT: 'oklch(0.82 0.01 240)',
          heading: 'oklch(0.95 0.01 240)',
          muted: 'oklch(0.60 0.01 240)',
        },
        border: {
          DEFAULT: 'rgba(255,255,255,0.08)',
          strong: 'rgba(255,255,255,0.14)',
          subtle: 'rgba(255,255,255,0.04)',
        },
        brand: {
          DEFAULT: 'oklch(0.62 0.20 260)',
          text: 'oklch(0.98 0.005 260)',
        },
      },
      boxShadow: {
        sm: '0 1px 2px rgba(0,0,0,0.30)',
        DEFAULT: '0 4px 8px rgba(0,0,0,0.40)',
        lg: '0 10px 20px rgba(0,0,0,0.50)',
      },
    },
  },
};

Integration

Spread the Nightfall config into your existing Tailwind configuration:

tailwind.config.js
const nightfall = require('./nightfall.tailwind.js');

module.exports = {
  content: ['./src/**/*.{tsx,ts,jsx,js}'],
  darkMode: nightfall.darkMode,
  theme: {
    extend: {
      ...nightfall.theme.extend,
      // Your existing extensions still work
      spacing: { /* ... */ },
      fontFamily: { /* ... */ },
    },
  },
  plugins: [],
};

Usage in Components

Once integrated, use the generated colors with Tailwind utilities:

Card.tsx
export function Card({ title, children }) {
  return (
    <div className="bg-background-surface border border-border rounded-lg shadow p-6">
      <h2 className="text-foreground-heading font-semibold text-lg">
        {title}
      </h2>
      <div className="text-foreground mt-2">
        {children}
      </div>
      <p className="text-foreground-muted text-sm mt-4">
        Last updated today
      </p>
    </div>
  );
}

Tailwind v4 Support

For Tailwind CSS v4 (which uses CSS-first configuration), generate CSS variables instead and reference them in your Tailwind config:

# For Tailwind v4, use CSS variables format
npx nightfall-css generate --format css-variables --output app.css

# Then in your Tailwind v4 CSS:
# @theme {
#   --color-background: var(--color-bg-page);
#   --color-surface: var(--color-bg-surface);
# }