# 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/\[framework]/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/\[framework]/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/\[framework]/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. doc.id.includes('tailwind/')} class="md:grid-cols-2" /> ## @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