What is the typography plugin in Tailwind CSS?
Overview
Tailwind is a utility-first CSS framework that operates on a lower level. Unlike other CSS frameworks such as Bootstrap, Pure, or Bulma, which offer pre-designed components, Tailwind CSS provides us with a set of CSS helper classes. We can develop custom user interfaces for the web using these classes.
Plugins
Plugins allow us to register new styles for Tailwind to inject into the user’s stylesheet using JavaScript instead of CSS. Tailwind provides official plugins for popular features.
We’ll begin by learning how to style with a typography plugin.
@tailwindcss/typography plugin
Tailwind disables all base styling from paragraphs, headings, lists, and other elements. This can be quite handy for creating custom user interfaces for applications. However, styling each element we might utilize in a large project will be difficult.
This is where the @tailwindcss/typography plugin comes in.
The @tailwindcss/typography plugin adds a set of customizable 'prose' utility classes that allows us to transform any vanilla HTML content into a beautiful, well-formatted page by adding typography styles.
Size modifiers
We can use a size modifier to change the overall size of our typography for different contexts.
Five different typography size modifiers are available:
prose-sm (14px)prose (16px)prose-lg (18px)prose-xl (20px)prose-2xl (24px)
Size modifiers are intended to be used in conjunction with the multi-class modifier pattern and must be used with the base prose class.
<article class="prose prose-sm"><!-- Content... --></article>
Color modifiers
The @tailwindcss/typography plugin allows us to beautify the anchor tag in addition to size modifiers.
Default text in the anchor tag is underlined and is formatted in gray color.
The following are the seven provided color modifier classes that are generated using a default Tailwind CSS:
prose-redprose-yellowprose-greenprose-blueprose-indigoprose-purpleprose-pink
Like size modifiers, color modifiers must also be used with the base prose class.
<article class="prose prose-red"><a href="https://educative.io">Visit</a> our platform to improve your learning experience!!!</article>
