10 Simple Practices That Will Help You Get 1% Better Every Day

This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you really are just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.

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.

• 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.
• It's not a bad idea to add a third item either.
  I think it probably would've been fine to just use two items but three is definitely not worse.

We get lots of complaints about it actually, with people regularly asking us things like:

Why is Tailwind removing the default styles on my h1 elements? How do I disable this? What do you mean I lose all the other base styles too?

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.

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

<article class="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
    with cheese to their children, with the food earning such an iconic status
    in our culture that kids will often dress up as warm, cheesy loaf for
    Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a
    series of rabies cases springing up around the country.
  </p>
</article>

By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more.

GitHub Flavored Markdown

I've also added support for GitHub Flavored Mardown using remark-gfm.

With remark-gfm, we get a few extra features in our markdown. Example: autolink literals.

A link like www.example.com or https://example.com would automatically be converted into an a tag.