# 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 our global styles, color system, typography, and more. This section details all available Skeleton-provided theme properties and utility classes.
## Introduction
Below you will find a mix of links to detailed documention, along with tables describing the following:
* `Skeleton Theme Property` - represents the CSS design token in each Skeleton them file.
* `Tailwind @theme Property` - represents the `@theme` property provided to Tailwind.
* `Class` - represents one or more example utilities classes generated by `@theme` injection.
If a class is not shown, consider using [Tailwind's arbitrary syntax](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values).
## @base
Extends Tailwind's base layer with a set of opinionated global styles.
View Global Styles
* Sets the root color scheme to match Dark Mode settings.
* Updates scrollbars to utilize theme colors.
* Updates global text selection to utilize theme colors.
* Defines the `` background colors and base font styles.
* Implements global default styles for disabled states, such as buttons.
## @theme
Uses Tailwind's `@theme` to implement a variety of new properties and utility classes.
View Theme Properties
### Colors
Extends colors to include the [Skeleton color palette](/docs/\[framework]/design/colors).
\| 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]` |
\| {`--`}body-background-color | {`--`}body-background-color | `body-background-color` |
\| {`--`}body-background-color-dark | {`--`}body-background-color-dark | `body-background-color-dark` |
### Brand
Represents the most prominant theme color in terms of color and shade. Can be tailored for light and dark mode.
\| 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), which balance colors between light and dark mode.
\| Skeleton Theme Property | Tailwind @theme Property | Class |
\| ----------------------------------- | ----------------------------------- | ------------------------------------ |
\| {`--`}color-\[color]-\[shade]-\[shade] | {`--`}color-\[color]-\[shade]-\[shade] | `[property]-[color]-[shade]-[shade]` |
> NOTE: Pairings values are specific; shade 500 does not include a pairing.
### 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) using the following formula.
```plaintext
--text-{size}: calc({remSize} * var(--text-scaling));
--text-{size}--line-height: calc(calc(1 / {remSize}) * var(--text-scaling));
```
#### Base
Controls the style of the global 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 | | |
### 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` |
### Edges
Sets the default width for border, outline, and ring to match the active theme properties.
\| 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.
### Corner Shape
Sets the default [corner-shape](https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape) for base elements and containers (e.g., squircle corners).
\| Skeleton Theme Property | Tailwind @theme Property | Class |
\| ---------------------------- | ------------------------ | ----- |
\| {`--`}corner-shape-base | | |
\| {`--`}corner-shape-container | | |
## @utility
View Utilities
### Tailwind Components
Allows you to style semantic HTML elements with utility classes.
doc.id.includes('tailwind/')} class="md:grid-cols-2" />
## @variant
View Variants
## Optional
### Presets
Provides a canned set of styling for use with buttons, badges, cards, and more.
Browse Presets
### Preset Themes
Provides a hand curated set of themes for Skeleton.
Browse Themes