*Build a Blog — chapter 1 of 2.* Readable long-form styles.

What you will build#

The reading experience.

Step by step#

example
html
<article class="max-w-prose mx-auto px-6 py-16 text-lg leading-relaxed">
  <h1 class="text-4xl font-bold tracking-tight">Title</h1>
  <p class="mt-6">Long-form text with a 65ch measure…</p>
</article>

Why it works#

max-w-prose + leading-relaxed = instant readability.

Try it yourself#

  • Add pull quotes
  • Add figure captions
  • Style code blocks

Series navigation#

tutorials/index|All tutorials · tutorials/blog/post-cards|Post cards & listing →