Using Tailwind Typography for blog posts

In this post, I will explain how AstroPaper uses the Tailwind Typography plugin to style blog post content.

Table of contents

What is Tailwind Typography?

The @tailwindcss/typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.

Headings

All headings from h2 through h6 are styled with appropriate sizes, weights, and margins.

Paragraphs

Paragraphs are styled with comfortable line heights and spacing for optimal readability.

Lists

Unordered

• This is an example of an unordered list
• Items are styled with bullets
• And proper spacing

Ordered

1. First item in an ordered list
2. Second item
3. Third item

Blockquotes

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Code Blocks

Inline code like console.log("hello") is styled differently from code blocks:

const greeting = "Hello, World!";
console.log(greeting);

Links

Links are styled with an accent color and appropriate hover states.

Tables

Images

Images in blog posts are displayed with proper margins and optional captions.

Conclusion

Tailwind Typography makes it easy to style blog post content without writing custom CSS for every HTML element. AstroPaper leverages this plugin to provide a beautiful reading experience out of the box.