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

Using Tailwind Typography’s “Lead” styles

A “Lead” block style is created by default in ./javascript/block-editor.js. This applies the .is-style-lead class to the active paragraph. (Which is the sort of thing you might do for the first paragraph of an article—your lead—to distinguish it from the rest of the copy.)

If you’d prefer this block style not be available in the editor, you can safely remove it from ./javascript/block-editor.js.

Limiting font weights

Tailwind Typography uses a wide range of font weights, which is great if you use a variable font. If your fonts aren’t variable and you don’t want to supply quite so many separate font files (or if your reference designs are more restrained in terms of weights), you may want to reduce the weights generated by Tailwind Typography down to a body weight and a bold weight.

In your tailwind-typography.config.js file, you’ll find, commented out, a block containing every font-weight declaration in Tailwind Typography’s default output. You can then decide how to adjust them to suit your design.

Customizing Tailwind Typography’s color theme

By default, _tw uses Tailwind Typography’s Neutral gray scale. If you are adapting an existing design and you need to set specific colors throughout, you can do so at the bottom of your tailwind-typography.config.js file. In your ./theme/functions.php file, you will need to replace prose-neutral with the appropriate prose class for your theme (as supplied in the comment about the theme itself).