Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typopgraphy scale based on your theme settings. As well as a number of primitives for extending and generating semantic typography sets.

Typographic Scale

Skeleton introduces a Typographic Scale to Tailwind’s font-size properties.

text-3xl

Scaling can be adjusted by modifying the type scale theme property.

[data-theme='cerberus'] {
  --text-scaling: 0.25rem;
}

This affects the following text sizes.

<h1 class="text-xs">text-xs</h1>
<h2 class="text-sm">text-sm</h2>
<h3 class="textba-base">text-base</h3>
<h4 class="text-lg">text-lg</h4>
<h5 class="text-xl">text-xl</h5>
<h6 class="text2-2xl">text-2xl</h6>
<h6 class="text3-3xl">text-3xl</h6>
<h6 class="text4-4xl">text-4xl</h6>
<h6 class="text5-5xl">text-5xl</h6>
<h6 class="text6-6xl">text-6xl</h6>
<h6 class="text7-7xl">text-7xl</h6>
<h6 class="text8-8xl">text-8xl</h6>
<h6 class="text9-9xl">text-9xl</h6>

Utility Classes

Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing an escape hatch when you need to break from convention.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<div class="space-y-4">
  <h1 class="h1">Heading 1</h1>
  <h2 class="h2">Heading 2</h2>
  <h3 class="h3">Heading 3</h3>
  <h4 class="h4">Heading 4</h4>
  <h5 class="h5">Heading 5</h5>
  <h6 class="h6">Heading 6</h6>
</div>

Paragraphs

The quick brown fox jumps over the lazy dog

Blockquotes

"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"

<blockquote class="blockquote">
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem
  est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"
</blockquote>

Anchor

Pre-Formatted

The quick brown fox jumps over the lazy dog.

Code

Insert the .example class here.

Keyboard

Press ⌘ + C to copy.

Insert & Delete

~~~~Always~~ Gonna Give You Up~~ Never Gonna Give You Up

Lists

Skeleton defers to Tailwind’s built-in utility classes for common list styles.

Unordered

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<ul class="list-inside list-disc space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

Ordered

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<ul class="list-inside list-decimal space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

Basic

Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<ul class="list-inside list-none space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

Description

Item A: Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Item B: Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Item C: Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.

<dl class="space-y-2">
  <div>
    <dt class="font-bold">Item A</dt>
    <dd class="opacity-60">Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</dd>
  </div>
  <div>
    <dt class="font-bold">Item B</dt>
    <dd class="opacity-60">Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</dd>
  </div>
  <div>
    <dt class="font-bold">Item C</dt>
    <dd class="opacity-60">Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</dd>
  </div>
</dl>

Navigation

<nav>
  <!-- (optional header text here) -->
  <ul class="space-y-2">
    <li>
      <a class="anchor" href="#">Home</a>
    </li>
    <li>
      <a class="anchor" href="#">About</a>
    </li>
    <li>
      <a class="anchor" href="#">Blog</a>
    </li>
  </ul>
</nav>

Semantic Typography

Typography can differ wildly from project to project, so we advise abstracting your own set of semantic typographic classes. These can be generated using any combination of Skeleton and Tailwind primities. Consider using a standaridzed prefix, such as type-* for each of these.

Semantic Typography needs to be updated.

<div class="card p-4 bg-red-500 text-center">
  <p>Semantic Typography needs to be updated.</p>
</div>

<!-- <div class="table-wrap">
  <table class="table">
    <thead>
      <tr>
        <th>Class</th>
        <th>Preview</th>
      </tr>
    </thead>
    <tbody>
      // type-display-4
      <tr>
        <td><code class="code">type-display-4</code></td>
        <td><h1 class="type-display-4">Aa</h1></td>
      </tr>
      // type-display-3
      <tr>
        <td><code class="code">type-display-3</code></td>
        <td><h2 class="type-display-3">Aa</h2></td>
      </tr>
      // type-display-2
      <tr>
        <td><code class="code">type-display-2</code></td>
        <td><h3 class="type-display-2">Aa</h3></td>
      </tr>
      // type-display-1
      <tr>
        <td><code class="code">type-display-1</code></td>
        <td><h4 class="type-display-1">Aa</h4></td>
      </tr>
      // type-headline
      <tr>
        <td><code class="code">type-headline</code></td>
        <td><p class="type-headline">Headline</p></td>
      </tr>
      // type-title
      <tr>
        <td><code class="code">type-title</code></td>
        <td><p class="type-title">Title</p></td>
      </tr>
      // type-subtitle
      <tr>
        <td><code class="code">type-subtitle</code></td>
        <td><p class="type-subtitle">Subtitle</p></td>
      </tr>
      // type-body-1
      <tr>
        <td><code class="code">type-body-1</code></td>
        <td>
          <p class="type-body-1">Body 1</p>
        </td>
      </tr>
      // type-body-2
      <tr>
        <td><code class="code">type-body-2</code></td>
        <td>
          <p class="type-body-2">Body 2</p>
        </td>
      </tr>
      // type-caption
      <tr>
        <td><code class="code">type-caption</code></td>
        <td><span class="type-caption">Caption</span></td>
      </tr>
      // type-menu
      <tr>
        <td><code class="code">type-menu</code></td>
        <td><span class="type-menu">Menu</span></td>
      </tr>
      // type-button
      <tr>
        <td><code class="code">type-button</code></td>
        <td><span class="type-button">Button</span></td>
      </tr>
    </tbody>
  </table>
</div> -->

<!--
  Copy the following classes to your global stylesheet. Rename and modify as desired.
  Reference: http://skeleton.dev/docs/get-started/core-api#typography
-->
<!-- <style lang="postcss">
  .type-display-4 {
    @apply text-xs1 md:text-xs2 lg:text-xs3;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-display-3 {
    @apply text-xs0 md:text-xs1 lg:text-xs2;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-display-2 {
    @apply text-5xl md:text-xs0 lg:text-xs1;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-display-1 {
    @apply text-4xl md:text-5xl lg:text-xs0;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-headline {
    @apply text-2xl md:text-3xl lg:text-4xl;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-title {
    @apply text-xl md:text-2xl lg:text-3xl;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family heading-font-weight;
  }
  .type-subtitle {
    @apply text-base md:text-lg lg:text-xl;
    @apply heading-font-color dark:heading-font-color-dark;
    @apply heading-font-family;
    @apply opacity-60;
  }

  .type-body-1 {
    @apply text-xl md:text-2xl lg:text-3xl;
  }
  .type-body-2 {
    @apply text-lg lg:text-xl;
  }
  .type-caption {
    @apply text-sm;
    @apply italic opacity-60;
  }
  .type-menu {
    @apply text-base;
    @apply font-bold;
  }
  .type-button {
    @apply text-base;
  }
</style> -->