Introduction to the "prose" class that instantly beautifies articles 【 TailwindCSS 】

#tailwindcss

For engineers who lack design sense and knowledge, determining the font size of h1 or h2, line spacing, and other styling decisions can be a challenging problem.

I would like to introduce a plugin called @tailwindcss/typography in Tailwind CSS that helps solve such problems.

@tailwindcss/typography is an official plugin for Tailwind CSS. After installing and configuring, you can use the prose class.

The prose class is applied to the children of the <article> and can be used like this:



<article class="prose lg:prose-xl">
  <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>

The prose class is applied to HTML elements that support Markdown syntax, such as h1, h2, p, code, li, table, img....

There are five predefined color and scale options available, and you can also make further adjustments or customizations. It also supports dark mode.



<article class="prose dark:prose-invert">
  {{ markdown }}
</article>

Let's take a look at some examples before and after applying the prose class.

BEFORE:

AFTER:

It looks more like a typical blog article.

The size and contrast of the text have changed, and the article is now centered, making it easier to read. This styling can be achieved simply by adding the class name prose.

If you are using Tailwind CSS, I recommend giving it a try as it is easy to implement and makes your articles more visually appealing.

That's all.