How can I disable the default styling for `h1` tags in TailwindCSS?

tailwindcssconvenience

What is happening

TailwindCSS in an awesome library. Everything feels right until you notice that your headings and lists look like plain text. If you haven't read the docs then you probably missed the section on Preflight which is the set of base styles that Tailwind is built on. Preflight is an opionated set of styling that removes base styling for headings, lists, paragraphs, and more.

Some of the reasoning that Tailwind gives for this makes sense. The base styling is meant to save you from having to constantly adjust for user agent stylesheets and to help you keep consistent with your type scale.

Regardless, you may want to keep the default styling. In my case, I'm generating HTML from Markdown and would like to keep the styling on my blog posts.

Tailwind suggests two approaches:

From the Tailwind blog:

The @tailwindcss/typography plugin is our attempt to give you what you actually want, without any of the downsides of doing something stupid like disabling our base styles.

Well, that's what I get for using a 3rd party library I guess. I've traded control for convenience.

Answer

  1. Add the typography plugin to your tailwind.config.js
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      require('@tailwindcss/typography'),
    ]
  }
  1. Add prose class to the parent container where you'd like to use the typography plugin.
  <article class="prose">
  <h1>Preflight should be opt-in</h1>
  <ul>
    <li>It's really jarring to discover this on your own</li>
    <li>If we <i>actually</i> want preflight then we'll install a plugin for it</li>
  </ul>
  </article>
Have a comment? Shoot me an email at jeremy@jeremyrader.com