Colors
Skeleton themes extend Tailwind's color palette and can be used anywhere within your project.
| Color | ID | Example |
|---|---|---|
| [style]-primary-[50-900] | Typically your primary brand color. | |
| [style]-secondary-[50-900] | A secondary branding color for supplementary value. | |
| [style]-tertiary-[50-900] | A third and additional branding color. | |
| [style]-success-[50-900] | Used for successful or positive actions, such as a form submit alert. | |
| [style]-warning-[50-900] | Used for negative or harmful actions, such as warnings. | |
| [style]-error-[50-900] | May be used for errors, alerts, and invalid inputs. | |
| [style]-surface-[50-900] | The base level colors, used for backgrounds. |
Color Palette
Shade 500 is used as the default value.
Primary
50
100
200
300
400
500 ★
600
700
800
900
Secondary
50
100
200
300
400
500 ★
600
700
800
900
Tertiary
50
100
200
300
400
500 ★
600
700
800
900
Success
50
100
200
300
400
500 ★
600
700
800
900
Warning
50
100
200
300
400
500 ★
600
700
800
900
Error
50
100
200
300
400
500 ★
600
700
800
900
Surface
50
100
200
300
400
500 ★
600
700
800
900
Usage
<!-- Inlined classes -->
<div class="bg-primary-500 text-secondary-500">Skeleton</div><!-- Tailwind opacity scale -->
<div class="border border-primary-500/30">Skeleton</div>/* Using Tailwind @apply */
.example { @apply text-primary-500; }/* Using CSS custom properties. Note that colors are RGB values! */
body { background: rgba(var(--color-surface-900) / 1); }