Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typography scale based on your theme settings. As well as a number of primitives for generating a semantic typography set for your project's individual needs.
Typographic Scale
Skeleton introduces customizable Typographic Scale to Tailwind’s font-size properties.
-text-scaling: 1| Class | Preview |
|---|---|
text-9xl | Aa |
text-8xl | Aa |
text-7xl | Aa |
text-6xl | Aa |
text-5xl | Aa |
text-4xl | Aa |
text-3xl | Aa |
text-2xl | Aa |
text-xl | Aa |
text-lg | Aa |
text-base | Aa |
text-sm | Aa |
text-xs | Aa |
Utility Classes
Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing a simple 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
<p>The quick brown fox jumps over the lazy dog</p>
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.
<pre class="pre">The quick brown fox jumps over the lazy dog.</pre>
Code
Insert the
.example class here.<div>Insert the <code class="code">.example</code> class here.</div>
Keyboard
Press ⌘ + C to copy.
<div>Press <kbd class="kbd">⌘</kbd> + <kbd class="kbd">C</kbd> to copy.</div>
Insert & Delete
<div class="w-full">
<del class="del"><s>Always</s> Gonna Give You Up</del>
<ins class="ins" cite="https://youtu.be/dQw4w9WgXcQ" datetime="10-31-2022"> Never Gonna Give You Up </ins>
</div>
Mark
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem est unde aspernatur veniam pariatur fuga.
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, <mark class="mark">aliquid</mark>. Molestias, odio illum voluptatibus
<mark class="mark">natus dignissimos</mark>, quidem est unde aspernatur veniam pariatur fuga.
</p>
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 class="space-y-2">
<!-- Optional Heading -->
<p class="text-lg font-bold">Explore</p>
<!-- / -->
<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
When working with your designers, they may craft a semantic typography set for your project. To handle this, we recommend implementing custom presets that mix CSS primitives with semantic HTML elements to replicate all desired styles. Feel free to use the boilerplate below, adding each style to your global stylesheet.
| Class | Preview |
|---|---|
preset-typo-display-4 | Aa |
preset-typo-display-3 | Aa |
preset-typo-display-2 | Aa |
preset-typo-display-1 | Aa |
preset-typo-headline | Headline |
preset-typo-title | Title |
preset-typo-subtitle | Subtitle |
preset-typo-body-1 | Body 1 |
preset-typo-body-2 | Body 2 |
preset-typo-caption | Caption |
preset-typo-menu | |
preset-typo-button |
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<!-- preset-typo-display-4 -->
<tr>
<td><code class="code">preset-typo-display-4</code></td>
<td><h1 class="preset-typo-display-4">Aa</h1></td>
</tr>
<!-- preset-typo-display-3 -->
<tr>
<td><code class="code">preset-typo-display-3</code></td>
<td><h2 class="preset-typo-display-3">Aa</h2></td>
</tr>
<!-- preset-typo-display-2 -->
<tr>
<td><code class="code">preset-typo-display-2</code></td>
<td><h3 class="preset-typo-display-2">Aa</h3></td>
</tr>
<!-- preset-typo-display-1 -->
<tr>
<td><code class="code">preset-typo-display-1</code></td>
<td><h4 class="preset-typo-display-1">Aa</h4></td>
</tr>
<!-- preset-typo-headline -->
<tr>
<td><code class="code">preset-typo-headline</code></td>
<td><p class="preset-typo-headline">Headline</p></td>
</tr>
<!-- preset-typo-title -->
<tr>
<td><code class="code">preset-typo-title</code></td>
<td><p class="preset-typo-title">Title</p></td>
</tr>
<!-- preset-typo-subtitle -->
<tr>
<td><code class="code">preset-typo-subtitle</code></td>
<td><p class="preset-typo-subtitle">Subtitle</p></td>
</tr>
<!-- preset-typo-body-1 -->
<tr>
<td><code class="code">preset-typo-body-1</code></td>
<td>
<p class="preset-typo-body-1">Body 1</p>
</td>
</tr>
<!-- preset-typo-body-2 -->
<tr>
<td><code class="code">preset-typo-body-2</code></td>
<td>
<p class="preset-typo-body-2">Body 2</p>
</td>
</tr>
<!-- preset-typo-caption -->
<tr>
<td><code class="code">preset-typo-caption</code></td>
<td><span class="preset-typo-caption">Caption</span></td>
</tr>
<!-- preset-typo-menu -->
<tr>
<td><code class="code">preset-typo-menu</code></td>
<td><span class="preset-typo-menu">Menu</span></td>
</tr>
<!-- preset-typo-button -->
<tr>
<td><code class="code">preset-typo-button</code></td>
<td><span class="preset-typo-button">Button</span></td>
</tr>
</tbody>
</table>
</div>
<style lang="postcss">
/* IGNORE THIS: this is only required for our example <style> block. */
/* https://tailwindcss.com/docs/functions-and-directives#reference-directive */
@reference "@/app.css";
/*
Copy the following classes to your global stylesheet. Rename and modify as desired.
Reference: http://skeleton.dev/docs/get-started/core-api#typography
*/
/* Headings */
.preset-typo-display-4,
.preset-typo-display-3,
.preset-typo-display-2,
.preset-typo-display-1,
.preset-typo-headline,
.preset-typo-title,
.preset-typo-subtitle,
.preset-typo-caption,
.preset-typo-menu,
.preset-typo-button {
color: var(--heading-font-color);
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
@variant dark {
color: var(--heading-font-color-dark);
}
}
/* Body */
.preset-typo-body-1,
.preset-typo-body-2,
.preset-typo-caption,
.preset-typo-menu,
.preset-typo-button {
color: var(--heading-font-color);
@variant dark {
color: var(--heading-font-color-dark);
}
}
/* Unique Properties */
.preset-typo-display-4 {
font-size: var(--text-7xl);
@variant lg {
font-size: var(--text-9xl);
}
}
.preset-typo-display-3 {
font-size: var(--text-6xl);
@variant lg {
font-size: var(--text-8xl);
}
}
.preset-typo-display-2 {
font-size: var(--text-5xl);
@variant lg {
font-size: var(--text-7xl);
}
}
.preset-typo-display-1 {
font-size: var(--text-4xl);
@variant lg {
font-size: var(--text-6xl);
}
}
.preset-typo-headline {
font-size: var(--text-2xl);
@variant lg {
font-size: var(--text-4xl);
}
}
.preset-typo-title {
font-size: var(--text-xl);
@variant lg {
font-size: var(--text-3xl);
}
}
.preset-typo-subtitle {
font-size: var(--text-base);
font-family: var(--heading-font-family);
color: var(--color-surface-700-300);
@variant lg {
font-size: var(--text-xl);
}
}
.preset-typo-body-1 {
font-size: var(--text-xl);
@variant lg {
font-size: var(--text-3xl);
}
}
.preset-typo-body-2 {
font-size: var(--text-lg);
@variant lg {
font-size: var(--text-xl);
}
}
.preset-typo-caption {
font-size: var(--text-sm);
color: var(--color-surface-700-300);
}
.preset-typo-menu {
font-weight: bold;
}
.preset-typo-button {
font-weight: bold;
}
</style>