Demo-Page with @tailwindcss-typography Plugin

Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id corrupti maxime similique quisquam sunt quis vero culpa awesome ipsum ullam vel odit eligendi, quo illum, aliquid sequi quae. Possimus, dignissimos!

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

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

<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>

For more information about how to use the plugin and the features it includes, read the documentation.

What to expect from here on out

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nemo itaque culpa distinctio, sed facilis voluptate non temporibus assumenda, fuga, quisquam consequatur ea obcaecati eveniet iure laborum suscipit aliquid id?

1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.

Now we're going to try out another header style.

Typography should be easy

It's probably important that images look okay here by default as well:

• So here is the first item in this list.
• In this example we're keeping the items short.
• Later, we'll use longer, more complex list items.

And that's the end of this section.

What if we stack headings?

We should make sure that looks good, too.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam voluptatem, quo aperiam nisi, error provident consectetur ex, culpa voluptates minus nihil voluptatibus natus nemo quibusdam laboriosam exercitationem dolor. Eveniet, assumenda?

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. Now let's see what a more complex list would look like.

The most annoying thing about lists in Markdown is that<li>elements aren't given a child<p>tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eveniet odit magni dicta fuga assumenda, nam aperiam. Porro recusandae fuga, unde optio mollitia sint laborum ex beatae itaque, assumenda soluta?

We haven't used anh4yet