Newsletter
Join the Community
Subscribe to our newsletter for the latest news and updates
I Moved Across the Country and Never Looked Back
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.
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, we need a bit more space, like I already mentioned above.
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.
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.