Stacks adds a new s-prose class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:

<article class="s-prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>For years parents have espoused the health benefits of eating garlic bread…</p>
</article>

What to expect from here on out

What follows from here is just a bunch of absolute nonsense we've written to dogfood the component itself. It includes every sensible typographic element we could think of, like bold text, unordered lists, ordered lists, code blocks, block quotes, and even italics.

It's important to cover all of these use cases for a few reasons:

1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.

Typography should be easy

So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.

Something a wise person once told me about typography is:

Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.

It's probably important that images look okay here by default as well:

Now I'm going to show you an example of an unordered list to make sure that looks good, too:

• So here is the first item in this list.
• In this example we're keeping the items short.
• Later, we'll use longer, more complex list items.

What if we stack headings?

We should make sure that looks good, too.

Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.

When a heading comes after a paragraph…

When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.

• I often do this thing where list items have headings.

  For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.

• Since this is a list, I need at least two items.

  I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item.

Code should look okay by default.

Here's what a default tailwind.config.js file looks like at the time of writing:

module.exports = {
  purge: [],
  theme: { extend: {} },
  variants: {},
  plugins: [],
}

Hopefully that looks good enough to you.

There are other elements we need to style

I almost forgot to mention links, like Stack Overflow.

We even included table styles, check it out:

We also need to make sure inline code looks good, like if I wanted to talk about <span> elements or tell you the good news about @tailwindcss/typography.

Sometimes I even use code in headings

Even though it's probably a bad idea, and historically I've had a hard time making it look good. This "wrap the code blocks in backticks" approach is the best we've come up with.

We haven't used an hr yet

---

We just used one. What do you think? Pretty nice, right?

The Comprehensive Formatting Test

Code Formatting

• Inline code formatting: System.out.println("Hello World!");
• Block code formatting:

System.out.println("Hello World!");
System.out.println("Code Block!");

<div class="s-progress s-progress__stepped">
    <div class="s-progress--step is-complete">
        <a href="…" class="s-progress--stop">…</a>
        <div class="s-progress--bar"></div>
    </div>
</div>

Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

Emphasis

This is italic and this is bold. Bold and italic.

Lists

Unordered

• Item one
• Item two
  • Nested item A
  • Nested item B
• Item three

Ordered

1. First item
2. Second item
   1. Nested first
   2. Nested second
3. Third item

Blockquotes

This is a blockquote. It can span multiple lines and should be styled appropriately.

It can also have multiple paragraphs.

Links

Here's a link to Stack Overflow.

Images

Tables

Horizontal Rules

---

Content after a horizontal rule.

Inline elements

This paragraph contains bold, italic, inline code, and a link.

It can also include ^superscript and _subscript text.