Colors v0.1.0

Frameworks

Sveltopia Colors generates drop-in files for Tailwind, shadcn/ui, Radix Colors, and Panda CSS. Import one file and your existing classes and components use your brand palette.

1. Generate Tailwind output

bash

npx @sveltopia/colors generate --colors "#FF4F00" --format tailwind

This creates tailwind.css in your output directory — a self-contained file with CSS variables for light and dark mode, plus a @theme block that registers every color as a Tailwind utility.

2. Import in your stylesheet

app.css

/* app.css */
@import 'tailwindcss';
@import './colors/tailwind.css';

About Tailwind's default colors: Importing tailwind.css adds your palette alongside Tailwind's built-in colors. Where hue names overlap (like orange or blue), yours win. But Tailwind defaults like emerald and fuchsia will still be available. If you want only your palette, add --color-*: initial before your import to clear the defaults:

app.css

/* app.css — use only Sveltopia colors */
@import 'tailwindcss';

@theme {
  --color-*: initial;
}

@import './colors/tailwind.css';

The --color-*: initial directive clears all of Tailwind's built-in color utilities. Your generated tailwind.css then re-registers only your palette's colors via its own @theme block.

3. Use Tailwind classes

All 31 hue scales are available as Tailwind utilities with a 50–950 scale:

html

<!-- Background + text -->
<div class="bg-orange-100 text-orange-900">
  Brand card
</div>

<!-- Borders and rings -->
<button class="border-blue-600 ring-blue-400">
  Action
</button>

<!-- Dark mode (automatic with .dark class) -->
<div class="bg-orange-100 text-orange-900 dark:bg-orange-900 dark:text-orange-100">
  Adaptive card
</div>

Still on Tailwind v3? Use --format tailwind-v3 to generate a JS preset file instead. See the CLI Reference for details.

Plain CSS & JSON

Not using a framework? The default --format css export gives you CSS custom properties that work anywhere — no build tools required. See the Quick Start for usage. The --format json export provides structured palette data (hex, OKLCH, and P3 values) for use in design tools, scripts, or custom integrations.