Using Tailwind Typography

Customize front-end and back-end typographic styles

With a goal of providing “beautiful typographic defaults” to HTML from a CMS, Tailwind Typography is ideal for content created in WordPress.

The plugin’s defaults can be overridden by a series of modifier classes. At their most basic, they allow you to select a type scale corresponding with a visitor’s screen size:

<article class="prose xl:prose-lg">
	<?php the_content(); ?>
</article>Code language: HTML, XML (xml)

You can also set your gray scale, support dark mode, and customize individual elements. Putting everything together, you end up with something like this:

<article class="prose prose-neutral prose-xl prose-a:text-primary">
	<?php the_content(); ?>
</article>Code language: HTML, XML (xml)

Breaking down the classes above:

• prose is the base Tailwind Typography function, required by all modifier classes.
• prose-neutral sets the gray scale.
• prose-xl sets the type scale.
• prose-a:text-primary is an element modifier, setting the link colour.

By stringing together element modifiers, you’re able to make significant customizations to the design of your content area as styled by Tailwind Typography.

If you need deeper customization, you can edit the included tailwind-typography.config.js file to customize Tailwind Typography’s raw CSS. I’ve included some tweaks in that file that improve Tailwind Typography styles for common elements in the WordPress block editor.

Adding modifier classes to your theme

You should add your modifier classes to the TYPOGRAPHY_CLASSES constant at the top of your ./theme/functions.php file. (In your generated theme, the constant’s name will be prefixed with your function prefix.)

Adding them here will automatically add them throughout your site: to all page-content, entry-content and comment-content elements, to the WordPress block editor, and to the classic editor and ACF (via TinyMCE).

All Documentation