Colors

This section provides a quick reference of each available theme color and their intended uses.

ID	Example	Description
`primary`	[style]-primary-[50-900]	Typically your primary brand color.
`secondary`	[style]-secondary-[50-900]	A secondary branding color for supplementary value.
`tertiary`	[style]-tertiary-[50-900]	A third and additional branding color.
`success`	[style]-success-[50-900]	Used for successful or positive actions, such as a form submit alert.
`warning`	[style]-warning-[50-900]	Used for negative or harmful actions, such as errors.
`error`	[style]-error-[50-900]	May be used for errors, alerts, and invalid inputs.
`surface`	[style]-surface-[50-900]	The base level colors, using for your background, cards, and other layered elements.

Usage

Skeleton themes extend Tailwind's color palette and can be used anywhere within your project. Here's a few examples:

html

<!-- Inlined classes -->
<div class="bg-primary-500 text-secondary-500">Skeleton</div>

html

<!-- Tailwind opacity scale -->
<div class="border border-primary-500/50">Skeleton</div>

css

/* Using Tailwind @apply */
.example { @apply text-primary-500; }

css

/* Using CSS custom properties. Note that colors are RGB values! */
body { background: rgba(var(--color-surface-900) / 1); }