# Core API
Learn about the specific features Skeleton introduces to Tailwind.
{
The heart of Skeleton is our 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 utility classes and theme properties.
}
---
## @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/design/colors).
| Class | Theme Property |
| ------------------------------------- | ------------------------------------ |
| `[property]-[color]-[shade]` | {`--`}color-[color]-[shade] |
| `[property]-[color]-contrast-[shade]` | {`--`}color-[color]-contrast-[shade] |
| `body-background-color` | {`--`}body-background-color |
| `body-background-color-dark` | {`--`}body-background-color-dark |
### Color Pairings
Extends colors to implement [Color Pairing](/docs/design/colors#color-pairings), which balance colors between light and dark mode.
| Class | Theme Property |
| ------------------------------------ | ----------------------------------- |
| `[property]-[color]-[shade]-[shade]` | {`--`}color-[color]-[shade]-[shade] |
### Spacing
Integrates Tailwind's [spacing property](https://tailwindcss.com/docs/functions-and-directives#spacing-function) to modify [dynamic scaling](/docs/design/spacing) for various utility classes.
| Class | Theme Property |
| --------- | -------------- |
| (various) | {`--`}spacing |
### 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.
| Class | Theme Property |
| ---------------------- | -------------------------- |
| `base-font-color` | {`--`}base-font-color |
| `base-font-color-dark` | {`--`}base-font-color-dark |
| `base-font-family` | {`--`}base-font-family |
| `base-font-size` | {`--`}base-font-size |
| `base-line-height` | {`--`}base-line-height |
| `base-font-weight` | {`--`}base-font-weight |
| `base-font-style` | {`--`}base-font-style |
| `base-letter-spacing` | {`--`}base-letter-spacing |
#### Heading
Controls the style of the heading text.
| Class | Theme Property |
| ------------------------- | ----------------------------- |
| `heading-font-color` | {`--`}heading-font-color |
| `heading-font-color-dark` | {`--`}heading-font-color-dark |
| `heading-font-family` | {`--`}heading-font-family |
| `heading-font-size` | {`--`}heading-font-size |
| `heading-line-height` | {`--`}heading-line-height |
| `heading-font-weight` | {`--`}heading-font-weight |
| `heading-font-style` | {`--`}heading-font-style |
| `heading-letter-spacing` | {`--`}heading-letter-spacing |
#### Anchor
Controls the style of anchor links.
| Class | Theme Property |
| ------------------------------- | ----------------------------------- |
| `anchor-font-color` | {`--`}anchor-font-color |
| `anchor-font-color-dark` | {`--`}anchor-font-color-dark |
| `anchor-font-family` | {`--`}anchor-font-family |
| `anchor-font-size` | {`--`}anchor-font-size |
| `anchor-line-height` | {`--`}anchor-line-height |
| `anchor-font-weight` | {`--`}anchor-font-weight |
| `anchor-font-style` | {`--`}anchor-font-style |
| `anchor-letter-spacing` | {`--`}anchor-letter-spacing |
| `anchor-text-decoration` | {`--`}anchor-text-decoration |
| `anchor-text-decoration-active` | {`--`}anchor-text-decoration-active |
| `anchor-text-decoration-focus` | {`--`}anchor-text-decoration-focus |
| `anchor-text-decoration-hover` | {`--`}anchor-text-decoration-hover |
### Radius
Extends Tailwind's radius properties with theme-specific sizes.
| Class | Theme Property |
| ------------------- | ---------------------- |
| `rounded-base` | {`--`}radius-base |
| `rounded-container` | {`--`}radius-container |
### Edges
Sets the default width for border, divide, and ring width to match the active theme properties.
| Class | Theme Property |
| -------- | -------------------------- |
| `border` | {`--`}default-border-width |
| `ring` | {`--`}default-ring-width |
| `divide` | {`--`}default-divide-width |
## @utility
View Utilities
### Tailwind Components
Allow you to style semantic HTML elements with utility classes.
## @variant
View Variants
### Themes
Enables you to target and style elements for a particular theme.
```html
...
...
...
```
## Optional
### Presets
Provides a canned set of styles for use with buttons, badges, cards, and more.
Browse Presets
### Preset Themes
Provides a hand curated set of themes for Skeleton.
Browse Themes