How to style markdown with Tailwind CSS

Nov 16, 2021

Tailwind CSS comes with “an opinionated set of base styles” called Preflight. A helpful CSS reset built on top of modern-normalize.

Margins, headings, lists, and many others get stripped from their defaults. Thus, achieving cross-browser consistency and an easier adaptation of your design system.

It all sounds helpful, until you need those defaults to style a markdown post.

In comes @tailwindcss/typography, a plugin with sensible typographic styles. It adds a set of prose classes to style content blocks like the one you are reading.

You can install it via npm or yarn:

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  plugins: [
    // ...

Finally, you can use the prose class to apply the markdown styling:

<article class="prose lg:prose-xl">
  <h1>Welcome to Mars!</h1>
    Although life on Mars is perfect in every single way, you might have some
    Of course there’s air! Just don’t breathe it. And, with the crazy gravity
    situation, everyone can dunk!
  <!-- ... -->

More information about the prose class and its modifiers can be found in the repository.