Skip to main content

By David Lindahl

Styling Rich Text and Markdown with Tailwind Typography

03.17.21

2 minutes to read

code projects

We've been using Tailwind CSS on our projects for a variety of reasons.

One extra feature about Tailwind that often flies under the radar is the Typography Plugin.

Styling text is generally a pretty straightforward process. Typically you can declare styles via utility classes on your header and paragraph HTML elements, create template components for them or set global styles via stylesheets. What happens though when the text content isn't in the HTML markup, but rather is rendered from a CMS—especially a markdown field? Some of the above still works, but when we use Tailwind and have content coming from a CMS, we almost always end up using Tailwind's Typography Plugin. It's easy to add, comes with excellent default text stylings out of the box, and allows you to customize everything from right inside the tailwind.config.js file (that we often use a single source of truth or design system for our UI).

How it works with content hydrated from a CMS

Note: This version of the plugin is for Tailwind CSS 2.0 and up. Refer to the docs if you are on version below 2.0

Here's how it works:

(The directions below can be found in the docs, but I copied them here so you don't have to open a new tab)

Step 1: Install the plugin

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

Step 2: Add it to your tailwind config file

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Step 3: Write this simple code:

<div class="prose">
	{{ content }}
</div>

{{ content }} is an antlers variable so it may change for you. In this case, it maps to a markdown field in the CMS.

That's all you need to make your typography and text content beautiful! This is super useful when the field in the CMS is a markdown field. Then the content manager can write completely in markdown and have it render beautifully.

There are also responsive classes and branded colors if you want to step it up a level. And of course—since the tailwind.config.js file is just a JavaScript object—you can add your own custom classes to the typography object.

Plus you can reference your original theme so you don't stray away from your website's branding! We used this plugin extensively on Laravel News, including adding six (including the default) of our own custom typography classes. For example, here's a class just for the excerpt texts on articles:

module.exports: {
  theme: {
    extend: {
      typography: {
        excerpt: {
          css: {
            p: {
              fontFamily: `${theme('fontFamily.display')}`,
              letterSpacing: theme('letterSpacing.tight'),
              fontSize: theme('fontSize.2xl'),
              lineHeight: theme('lineHeight.8'),
            }
          }
        },
      },
    },
  },
}

This plugin makes it easy to control text styling, especially if they are being generated by a CMS that is markdown fields. To see it in action, visit any news post on the new Laravel News website!

Want to read more tips and insights on working with a website development team that wants to help your organization grow for good? Sign up for our bimonthly newsletter.

By David Lindahl

David enjoys watching footy, jamming on e-commerce, being a girl dad, playing tug with his dog, and taking photographs of Pacific Northwest-y things like trees — often all at the same time.

Keep on reading