Headings

Paragraph

Anchor

Blockquote

Pre-formatted Text

The quick brown fox jumps over the lazy dog.

Code

Keyboard

Insertion / Deletion

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. You may then set or adjust the modifiers for each element. Skeleton provides a few default adaptive theme styles for common prose elements, such as: headings, paragraphs, and anchors. See the instruction provided below.

Method 1: Inline Utility Classes:

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

Method 2: Global Stylesheet Overrides

<article class="prose lg:prose-xl"></article>

/* 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

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