Tailwind

Typography

Provides a variety of globally scoped typographic styles. Keeps common tags styled consistently throughout an app.

Source Page Source

Opt-In Typography

New in v1.5+

Please review the new changes for Skeleton's typography system.

Starting Skeleton v1.5+ we've introduced a new opt-in typography system that will replace the on-by-default system of prior versions. This allows you to choose which elements receive Skeleton's typography via utility classes, similar to Skeleton's form styles.

Headings

Skeleton H1

Skeleton H2

Skeleton H3

Skeleton H4

Skeleton H5
Skeleton H6

Paragraph

The quick brown fox jumps over the lazy dog.

Anchor

Anchor

Blockquote

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita cupiditate dolores dignissimos maiores doloremque fugiat, dolore doloribus nisi, repellendus mollitia nostrum, commodi a minus aperiam deleniti. Velit rerum ut tempora!

Pre-formatted Text

The quick brown fox jumps over the lazy dog.

Code

.myExampleClass

Keyboard

Press ⌘ + C to copy.

Insertion / Deletion

Always Gonna Give You Up Never Gonna Give You Up

Using the Tailwind Plugin

Tailwind provides an official plugin to automatically style HTML you do not control, such as CMS or blog content. Follow Tailwind's official instructions to install and configure this plugin within your project, then set or adjust the modifiers for each element.

Method 1: Inline Utility Classes:

html 
<article class="prose lg:prose-xl prose-code:bg-purple-500"></article>

Method 2: Global Stylesheet Overrides

html 
<article class="prose"></article>
css 
/* Set the following in /src/app.postcss */

.prose {
	/* Modifying the H1 tag modifiers */
	@apply prose-h1:text-3xl prose-h1:md:text-5xl;

	/* Modifying the CODE element modifiers */
	@apply prose-code:bg-purple-500;
}

When overriding existing styles you may need to use ! to set important, such as prose-code:!bg-purple-500

Excluding Styles

Deprecated

Use the .unstyled class to exclude and reset Skeleton's on-by-default typography styles, then apply new styles as desired.

Unstyled H2

Unstyled paragraph element.

Unstyled anchor element.