# Core API

Learn about the specific features Skeleton introduces to Tailwind.

The heart of Skeleton is the framework agnostic core package. This adapts and extends Tailwind to introduce Skeleton's global styles, color system, typography, and more. Each section below details available theme properties and utility classes.

## Introduction

Below you will find documentation covering Skeleton's core features.

* **Skeleton Theme Property** - represents the CSS design token within each Skeleton theme file.
* **Tailwind @theme Property** - represents the `@theme` property provided to Tailwind.
* **Class** - represents one or more utility classes generated by `@theme` injection.

## @base

Extends Tailwind's base layer with a set of opinionated global styles. Refer to [Globals](/docs/svelte/design/globals) for details.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/base/globals.css" target="_blank">
    View Global Styles
  </a>
</figure>

## @theme

Uses Tailwind's `@theme` to implement a variety of new properties and utility classes.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/base/theme.css" target="_blank">
    View Theme Properties
  </a>
</figure>

### Animations

Provides keyframe-driven animation utilities used by Skeleton's internal components.

\| Skeleton Theme Property                                | Tailwind @theme Property                               | Class                                              |
\| ------------------------------------------------------ | ------------------------------------------------------ | -------------------------------------------------- |
\| {`--`}animate-progress-linear-indeterminate-horizontal | {`--`}animate-progress-linear-indeterminate-horizontal | `animate-progress-linear-indeterminate-horizontal` |
\| {`--`}animate-progress-linear-indeterminate-vertical   | {`--`}animate-progress-linear-indeterminate-vertical   | `animate-progress-linear-indeterminate-vertical`   |
\| {`--`}animate-progress-circular-indeterminate          | {`--`}animate-progress-circular-indeterminate          | `animate-progress-circular-indeterminate`          |

### Colors

Extends Tailwind's color palette with Skeleton theme-specific color values. Refer to [Colors](/docs/\[framework]/design/colors) for details.

\| Key      | Accepted Values                                                                                                  |
\| -------- | ---------------------------------------------------------------------------------------------------------------- |
\| Property | `accent`, `bg`, `border`, `caret`, `decoration`, `divide`, `fill`, `outline`, `ring`, `shadow`, `stroke`, `text` |
\| Color    | `primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `surface`                                     |
\| Shade    | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `950`                                       |

Represents the most common and standard color properties available to use.

\| Skeleton Theme Property              | Tailwind @theme Property             | Class                                 |
\| ------------------------------------ | ------------------------------------ | ------------------------------------- |
\| {`--`}color-\[color]-\[shade]          | {`--`}color-\[color]-\[shade]          | `[property]-[color]-[shade]`          |
\| {`--`}color-\[color]-contrast-\[shade] | {`--`}color-\[color]-contrast-\[shade] | `[property]-[color]-contrast-[shade]` |
\| {`--`}color-\[color]-contrast-light   | {`--`}color-\[color]-contrast-light   | `[property]-[color]-contrast-light`   |
\| {`--`}color-\[color]-contrast-dark    | {`--`}color-\[color]-contrast-dark    | `[property]-[color]-contrast-dark`    |
\| {`--`}color-root-bg-light            | {`--`}color-root-bg-light            | `[property]-root-bg-light`            |
\| {`--`}color-root-bg-dark             | {`--`}color-root-bg-dark             | `[property]-root-bg-dark`             |

#### Brand

Represents a variable accent color that can be tailored for light and dark mode. Refer to [Brand Color](/docs/svelte/design/colors#brand-color) for details.

\| Skeleton Theme Property          | Tailwind @theme Property         | Class                             |
\| -------------------------------- | -------------------------------- | --------------------------------- |
\| {`--`}color-brand-light          | {`--`}color-brand-light          | `[property]-brand-light`          |
\| {`--`}color-brand-contrast-light | {`--`}color-brand-contrast-light | `[property]-brand-contrast-light` |
\| {`--`}color-brand-dark           | {`--`}color-brand-dark           | `[property]-brand-dark`           |
\| {`--`}color-brand-contrast-dark  | {`--`}color-brand-contrast-dark  | `[property]-brand-contrast-dark`  |

#### Color Pairings

Extends colors to implement [Color Pairing](/docs/\[framework]/design/colors#color-pairings), balancing colors for light and dark mode using the CSS `light-dark()` function.

\| Skeleton Theme Property                      | Tailwind @theme Property                     | Class                                         |
\| -------------------------------------------- | -------------------------------------------- | --------------------------------------------- |
\| {`--`}color-\[color]-\[shade]-\[shade]          | {`--`}color-\[color]-\[shade]-\[shade]          | `[property]-[color]-[shade]-[shade]`          |
\| {`--`}color-\[color]-contrast-\[shade]-\[shade] | {`--`}color-\[color]-contrast-\[shade]-\[shade] | `[property]-[color]-contrast-[shade]-[shade]` |

> NOTE: Pairing values are specific; shade 500 does not include a pairing.

### Edges

Sets the default width for Tailwind's border, ring, and outline utilities to match theme values.

\| Skeleton Theme Property     | Tailwind @theme Property    | Class     |
\| --------------------------- | --------------------------- | --------- |
\| {`--`}default-border-width  | {`--`}default-border-width  | `border`  |
\| {`--`}default-ring-width    | {`--`}default-ring-width    | `ring`    |
\| {`--`}default-outline-width | {`--`}default-outline-width | `outline` |

> IMPORTANT: never set `outline` to `0px` as this would violate accessibility.

#### Border Radius

Extends Tailwind's radius properties with theme-specific sizes.

\| Skeleton Theme Property | Tailwind @theme Property | Class               |
\| ----------------------- | ------------------------ | ------------------- |
\| {`--`}radius-base       | {`--`}radius-base        | `rounded-base`      |
\| {`--`}radius-container  | {`--`}radius-container   | `rounded-container` |

#### Corner Shape

Enables the [corner-shape](/docs/\[framework]/tailwind-utilities/corner-shapes#browser-support) utility, and sets the default `base` and `container` sizes respectively.

\| Skeleton Theme Property      | Tailwind @theme Property | Class                  |
\| ---------------------------- | ------------------------ | ---------------------- |
\|                              |                          | corner-shape-\*        |
\| {`--`}corner-shape-base      |                          | corner-shape-base      |
\| {`--`}corner-shape-container |                          | corner-shape-container |

> NOTE: this is an emerging feature with limited browser support. Make sure to utilize progressive enhancement.

### Element Sizes

A roster of element sizes matching Tailwind's built-in `--type-*` scale. These are the basis for button, badge, chip, and field sizes. As well as enabling uniform [icons sizes](/docs/\[framework]/design/iconography#sizes). Can also be used with `size-*`, `w-*`, `h-*`, and more (ex: `size-elem-xl`).

\| Skeleton Theme Property | Tailwind @theme Property | Class                  |
\| ----------------------- | ------------------------ | ---------------------- |
\|                         | {`--`}spacing-elem-xs    | `[property]-elem-xs`   |
\|                         | {`--`}spacing-elem-sm    | `[property]-elem-sm`   |
\|                         | {`--`}spacing-elem-base  | `[property]-elem-base` |
\|                         | {`--`}spacing-elem-lg    | `[property]-elem-lg`   |
\|                         | {`--`}spacing-elem-xl    | `[property]-elem-xl`   |
\|                         | {`--`}spacing-elem-2xl   | `[property]-elem-2xl`  |
\|                         | {`--`}spacing-elem-3xl   | `[property]-elem-3xl`  |
\|                         | {`--`}spacing-elem-4xl   | `[property]-elem-4xl`  |
\|                         | {`--`}spacing-elem-5xl   | `[property]-elem-5xl`  |
\|                         | {`--`}spacing-elem-6xl   | `[property]-elem-6xl`  |
\|                         | {`--`}spacing-elem-7xl   | `[property]-elem-7xl`  |
\|                         | {`--`}spacing-elem-8xl   | `[property]-elem-8xl`  |
\|                         | {`--`}spacing-elem-9xl   | `[property]-elem-9xl`  |

### Spacing

Integrates Tailwind's [spacing property](https://tailwindcss.com/docs/functions-and-directives#spacing-function) to modify [dynamic scaling](/docs/\[framework]/design/spacing) for various utility classes.

\| Skeleton Theme Property | Tailwind @theme Property | Class     |
\| ----------------------- | ------------------------ | --------- |
\| {`--`}spacing           | {`--`}spacing            | (various) |

### Typography

Introduces a [typographic scale](https://designcode.io/typographic-scales) to all Tailwind [font sizes](https://tailwindcss.com/docs/font-size) and [line-height](https://tailwindcss.com/docs/line-height) properties using the following formula.

```plaintext
--text-{size}: calc({remSize} * var(--text-scaling));
--text-{size}--line-height: calc(calc(1 / {remSize}) * var(--text-scaling));
```

\| Skeleton Theme Property | Tailwind @theme Property | Class |
\| ----------------------- | ------------------------ | ----- |
\| {`--`}text-scaling      |                          |       |

#### Base

Controls the style of the base (aka global) default page text.

\| Skeleton Theme Property         | Tailwind @theme Property    | Class                        |
\| ------------------------------- | --------------------------- | ---------------------------- |
\| {`--`}typo-base--font-family    | {`--`}font-typo-base        | `font-typo-base`             |
\| {`--`}typo-base--font-size      | {`--`}text-typo-base        | `text-typo-base`             |
\| {`--`}typo-base--color-light    | {`--`}color-typo-base-light | `[property]-typo-base-light` |
\| {`--`}typo-base--color-dark     | {`--`}color-typo-base-dark  | `[property]-typo-base-dark`  |
\| {`--`}typo-base--line-height    | {`--`}leading-typo-base     | `leading-typo-base`          |
\| {`--`}typo-base--font-weight    |                             |                              |
\| {`--`}typo-base--font-style     |                             |                              |
\| {`--`}typo-base--letter-spacing | {`--`}tracking-typo-base    | `tracking-typo-base`         |
\| {`--`}typo-base--font-stretch   |                             |                              |
\| {`--`}typo-base--font-kerning   |                             |                              |
\| {`--`}typo-base--text-shadow    | {`--`}text-shadow-typo-base | `text-shadow-typo-base`      |
\| {`--`}typo-base--word-spacing   |                             |                              |
\| {`--`}typo-base--hyphens        |                             |                              |
\| {`--`}typo-base--text-transform |                             |                              |

#### Heading

Controls the style of the heading text.

\| Skeleton Theme Property            | Tailwind @theme Property       | Class                           |
\| ---------------------------------- | ------------------------------ | ------------------------------- |
\| {`--`}typo-heading--font-family    | {`--`}font-typo-heading        | `font-typo-heading`             |
\| {`--`}typo-heading--color-light    | {`--`}color-typo-heading-light | `[property]-typo-heading-light` |
\| {`--`}typo-heading--color-dark     | {`--`}color-typo-heading-dark  | `[property]-typo-heading-dark`  |
\| {`--`}typo-heading--font-weight    |                                |                                 |
\| {`--`}typo-heading--font-style     |                                |                                 |
\| {`--`}typo-heading--letter-spacing | {`--`}tracking-typo-heading    | `tracking-typo-heading`         |
\| {`--`}typo-heading--font-stretch   |                                |                                 |
\| {`--`}typo-heading--font-kerning   |                                |                                 |
\| {`--`}typo-heading--text-shadow    | {`--`}text-shadow-typo-heading | `text-shadow-typo-heading`      |
\| {`--`}typo-heading--word-spacing   |                                |                                 |
\| {`--`}typo-heading--hyphens        |                                |                                 |
\| {`--`}typo-heading--text-transform |                                |                                 |

#### Anchor

Controls the style of anchor links.

\| Skeleton Theme Property                              | Tailwind @theme Property      | Class                          |
\| ---------------------------------------------------- | ----------------------------- | ------------------------------ |
\| {`--`}typo-anchor--font-family                       | {`--`}font-typo-anchor        | `font-typo-anchor`             |
\| {`--`}typo-anchor--font-size                         | {`--`}text-typo-anchor        | `text-typo-anchor`             |
\| {`--`}typo-anchor--color-light                       | {`--`}color-typo-anchor-light | `[property]-typo-anchor-light` |
\| {`--`}typo-anchor--color-dark                        | {`--`}color-typo-anchor-dark  | `[property]-typo-anchor-dark`  |
\| {`--`}typo-anchor--line-height                       | {`--`}leading-typo-anchor     | `leading-typo-anchor`          |
\| {`--`}typo-anchor--font-weight                       |                               |                                |
\| {`--`}typo-anchor--font-style                        |                               |                                |
\| {`--`}typo-anchor--letter-spacing                    | {`--`}tracking-typo-anchor    | `tracking-typo-anchor`         |
\| {`--`}typo-anchor--font-stretch                      |                               |                                |
\| {`--`}typo-anchor--font-kerning                      |                               |                                |
\| {`--`}typo-anchor--text-shadow                       | {`--`}text-shadow-typo-anchor | `text-shadow-typo-anchor`      |
\| {`--`}typo-anchor--word-spacing                      |                               |                                |
\| {`--`}typo-anchor--hyphens                           |                               |                                |
\| {`--`}typo-anchor--text-transform                    |                               |                                |
\| {`--`}typo-anchor--text-decoration-line              |                               |                                |
\| {`--`}typo-anchor--text-decoration-color             |                               |                                |
\| {`--`}typo-anchor--text-decoration-style             |                               |                                |
\| {`--`}typo-anchor--text-decoration-thickness         |                               |                                |
\| {`--`}typo-anchor--text-underline-offset             |                               |                                |
\| {`--`}typo-anchor--text-underline-position           |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-line       |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-color      |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-style      |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-thickness  |                               |                                |
\| {`--`}typo-anchor--hover--text-underline-offset      |                               |                                |
\| {`--`}typo-anchor--hover--text-underline-position    |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-line      |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-color     |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-style     |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-thickness |                               |                                |
\| {`--`}typo-anchor--active--text-underline-offset     |                               |                                |
\| {`--`}typo-anchor--active--text-underline-position   |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-line       |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-color      |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-style      |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-thickness  |                               |                                |
\| {`--`}typo-anchor--focus--text-underline-offset      |                               |                                |
\| {`--`}typo-anchor--focus--text-underline-position    |                               |                                |

## @utility

Implements Skeleton's Tailwind-specific components and utilities.

<figure class="linker bg-noise">
  <a href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/utilities" target="_blank" class="btn preset-filled">
    View Utilities
  </a>
</figure>

### Presets

Provides a reusable set of canned [Preset](/docs/\[framework]/tailwind-utilities/presets) styles for use with buttons, badges, cards, and more.

### Tailwind Components

Allows you to style semantic HTML elements with utility classes.

<NavigationGrid filter={(doc) => doc.id.includes('tailwind-components/')} class="md:grid-cols-2" />

## Themes

Provides a curated set of handcrafted themes for Skeleton.

<figure class="linker bg-noise">
  <a href={resolvePath(props.Astro, '/docs/[framework]/design/themes')} class="btn preset-filled">
    Browse Themes
  </a>
</figure>

***

## Arbitrary Syntax

If a certain Tailwind-generated utility class is not available to represent a Skeleton theme property, consider using [Tailwind's arbitrary syntax](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) to supplement this.

```html
<p class="[font-style:var(--typo-heading--font-style)]">Heading Font Style</p>
```