“I created an AI assistant for Laravel developers that handles all the boring work.”
Learn more
Smousss
Benjamin Crozat The art of crafting web applications

Tailwind CSS typography plugin: a step-by-step build guide

Benjamin Crozat — Updated on

To me, one of the key features of Tailwind CSS is its typography plugin, which offers sensible defaults and easy customization.

The blog post you are reading is actually using this plugin.

Now, let’s walk you through a step-by-step guide on installing and using it to build your own beautiful blog posts (which is, of course, just one use case among many others).

Table of contents

Tailwind CSS typography plugin: a step-by-step build guide

What is @tailwindcss/typography?

@tailwindcss/typography is a plugin that helps make your text look great.

It comes with ready-to-use styles for your HTML. You don’t need to write your own CSS. This is very helpful when working with text from a CMS or Markdown.

Let’s start by adding the plugin to your project and learn how to use it.

Installation

Before you start using the plugin, you need to install it. Follow these simple steps:

Open your terminal and type this command:

npm install -D @tailwindcss/typography

This will install the plugin from NPM.

Now, add the plugin to your tailwind.config.js file. Open the file and add this code:

module.exports = {
plugins: [
require('@tailwindcss/typography')
]
}

This tells Tailwind to use the typography plugin.

That’s it! You have installed the plugin. Now, let’s learn how to use it in your project.

Usage

You can now use the prose classes to style your text.

Here’s an example of how to use these classes with simple HTML:

<article class="prose">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Minim non consequat ullamco esse excepteur et voluptate magna eu proident esse consequat. Esse velit et sit quis ipsum amet eu elit.</p>
</article>

In this example, we wrap the HTML content in an <article> element and add the prose class. This class applies nice styles to the text inside.

Choosing a grayscale (or the theme)

Tailwind CSS typography plugin comes with built-in themes to make your content look even better.

You can easily style your content to match the colors you’re using in your project. Here’s how to do it:

Wrap your content in an <article> element with the prose class. Then, a theme modifier class.

<article class="prose prose-slate">
</article>

Here are the available theme classes with their corresponding color scales:

Remember to always include the prose class when adding a theme modifier.

Applying a type scale

Tailwind CSS typography plugin makes it easy to adjust the overall size of your text for different situations.

It includes five different typography sizes out of the box that you can use to change the font size of your content:

To apply a type scale to your content, add the corresponding size modifier class to the <article> element:

<article class="prose prose-xl">
</article>

These size modifiers can also be combined with Tailwind CSS’ breakpoint modifiers to change the font size of your content at different viewport sizes:

<article class="prose md:prose-lg lg:prose-xl">
</article>

With these type scale options, you can easily adjust the size of your text to fit different scenarios and make your content more readable across various screen sizes.

Adapting to dark mode

To make your blog post look great in dark mode, the Tailwind CSS typography plugin includes a hand-designed dark mode version for each default theme.

To enable it, simply add the dark:prose-invert class to the <article> element:

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

Now, when your website is in dark mode, the text will automatically adjust to look great with the dark background.

In the next sections, we’ll learn how to customize elements within your blog post and how to create your own theme for a unique look.

Customizing individual elements

Now that we understand how the Tailwind CSS typography plugin works, let’s dive deeper into customizing individual elements within our content.

The plugin provides a wide range of element modifiers that directly tailor specific elements such as headings, links, images, and more in your HTML.

Styling headings, links, and images

Let’s say you want to customize the headings to be underlined, links to have a specific brand color, and images to have a rounded border.

Here’s how you would do it:

<article class="prose prose-headings:underline prose-a:text-blue-600 prose-img:rounded-xl">
</article>

With this configuration, your h1, h2, h3, and h4 headings will have an underline, your links will be styled with a blue color (with a hex value of #4A64FF), and your images will have a rounded border.

A complete list of element modifiers

Here is a comprehensive list of available element modifiers that you can use to customize your content:

When using these modifiers alongside others like hover, it’s best to have the other modifier come first:

<article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">
</article>

Use all the width

The plugin comes with built-in max-width settings that are designed to maintain the readability of your content. However, there might be scenarios where you want your content to fill the width of its container.

By default, a max-width is applied to each size modifier to optimize readability. If you want to remove this constraint and allow your content to fill its container, simply add the max-w-none utility class to your HTML element:

<article class="prose max-w-none">
</article>

Remember that the max-w-none class should be used in conjunction with the base prose class and any other desired modifier classes.

Exclude blocks of HTML from prose styles

To exclude a block of markup from inheriting the prose styles, you can use the not-prose. This is particularly useful when you have a part of your content that requires different styling from the main content.

Here’s an example:

<article class="prose">
<h1>Lorem ipsum dolor sit amet</h1>
 
<p>Reprehenderit aliqua sit laboris adipisicing amet mollit…</p>
 
<div class="not-prose">
<form></form>
</div>
 
<p></p>
</article>

In the example above, we exclude our newsletter form from the prose styles by applying a not-prose class.

It’s important to note that, at the moment, you cannot nest new prose instances within a not-prose block. If you need to apply different typography styles within a not-prose block, you’ll need to handle that with separate custom styling or utility classes.

Recommended

This is the most comprehensive tutorial about Tailwind CSS. Learn how to make front-end development great again.

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Offer new ways to interact with your app to your users. Learn how to build a ChatGPT plugin with Laravel.

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

Discover how the Tailwind CSS forms plugin can reset your forms to a consistent state across all browsers and make styling easier.

Here's a case study for my blog in the programming niche, where I share everything I did to increase clicks by a huge amount since the beginning.

Take your code to the next level, thanks to exceptions. Handle errors in a more graceful way within try and catch blocks.

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

Knowing which Laravel version you are running is important before you start writing code on a new project. There are multiple ways to do so.

I show you how to upgrade your Laravel 9 project to version 10 and help you decide whether the return on investment is worth it.

Powered by