# Core API
Learn about the specific features Skeleton introduces to Tailwind.
***
## @base
Extends Tailwind's base layer with a set of opinionated 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.
### 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
### Tailwind Components
Allow you to style semantic HTML elements with utility classes.
## @variant
### 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.
### Preset Themes
Provides a hand curated set of themes for Skeleton.