Unlock seamless workflows and faster delivery with our latest releases- get the details
Last updated June 17, 2021

ProseableText: Combine Tailwind CSS Typography with Portable Text

By Simeon Griggs

Get the best of both worlds. Tailwind-styled typography and Portable Text's markup-and-components structure.

Protip

You may no longer need this! The Typography Plugin now supports a not-prose class which escapes from prose formatting. Make sure your Portable Text components use this class and you'll no longer need to add the additional step described below.

Tailwind CSS Typography helps you render markup with beautiful styles.

Portable Text combines text markup with Components in one piece of data.

However the .prose class with its CSS inheritance can mess up any Components sprinkled within markup.

With a clever use of reduce we can get the best of both worlds. Thanks to Robin Malfait for pointing me in this direction.

Protip

This guide has been updated to use the new portabletext/react-portabletext component! Check out the migration guide if you're updating too.

Use this Component just as you would your normal PortableText Component. For example:

<ProseableText value={value} />

Considerations:

  • This code assumes you have setup a PortableText Component using at least version 0.5.0 of next/sanity, but it should work with any use of the portabletext/react-portabletext package.
  • You may prefer to setup the prose classes as a prop so this Component is more reusable
  • Because prose will remove the top/bottom margin from the first/last element in an element respectively – you may wish to add this back in. The py-4 class is added in the demo below for this reason.
  • If using the older version block-content-to-react package, In your serializers, add container: ({children}) =>children so that blocks are not rendered with a wrapping <div>
import React, {useMemo} from 'react'
import {PortableText} from '../lib/sanity'

/**
 * Use Tailwind CSS's `prose` classes with Portable Text markup (blocks)
 * Without inheriting styles for custom components (types)
 */
export default function ProseableText({value = []}) {
  // Group together standard `_type === "block"`  blocks
  // eg <p>, <li>, etc – and separate out everyone else
  const valueGroups = useMemo(
    () =>
      value.reduce(
        (acc, item) => {
          const lastIdx = acc.length - 1

          if (
            // We don't have items in this group yet
            acc[lastIdx].length === 0 ||
            // The last group has the same `type`
            acc[lastIdx][0]._type === item._type
          ) {
            acc[lastIdx].push(item)
          } else {
            // Time to create a new group, because the `type` is different compared to last group
            acc.push([item])
          }

          return acc
        },
        [[]]
      ),
    [blocks]
  )

  if (!valueGroups?.length) return null

  return valueGroups.map((group) =>
    group[0]._type === 'block' ? (
      <div key={group[0]._key} className="prose py-4">
        <PortableText value={group} />
      </div>
    ) : (
      <PortableText key={group[0]._key} value={group} />
    )
  )
}

Sanity – build remarkable experiences at scale

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.

Other guides by author

An opinionated guide to Sanity Studio

Official(made by Sanity team)

Sanity Studio is an incredibly flexible tool with near limitless customisation. Here's how I use it.

Simeon Griggs
Go to An opinionated guide to Sanity Studio