In Depth
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
- Quickstart
Get started quickly, and deploy to production sooner than you expect
Fundamentals
- Installation
Generate your custom theme, install it in WordPress and run your first Tailwind builds - Development
Watch for changes, build for production and learn more about how _tw, WordPress and Tailwind work together - Deployment
Share your new WordPress theme with the world - Troubleshooting
Find solutions to potential issues and answers to frequently asked questions
In Depth
- Using Tailwind Typography
Customize front-end and back-end typographic styles - JavaScript Bundling with esbuild
Install and bundle JavaScript libraries (very quickly) - Linting and Code Formatting
Catch bugs and stop thinking about formatting
Extras
- On Tailwind and WordPress
Understand how WordPress and Tailwind work together - Managing Styles for Custom Blocks
Learn strategies for using Tailwind in theme-specific custom blocks - Setting Up Browsersync
Add live reloads and synchronized cross-device testing to your workflow