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.

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.

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

<ProseableText blocks={blocks} />

Considerations:

This code assumes you have setup a PortableText Component using next/sanity, but it should work with any use of the block-content-to-react package.
In your serializers, add container: ({children}) =>children so that blocks are not rendered with a wrapping <div>
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.

import React, {useMemo} from 'react'
import PropTypes from 'prop-types'
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({blocks = []}) {
  // Group together standard `_type === "block"`  blocks
  // eg <p>, <li>, etc – and separate out everyone else
  const blockGroups = useMemo(
    () =>
      blocks.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 (!blockGroups?.length) return null

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

ProseableText.propTypes = {
  blocks: PropTypes.array.isRequired,
}

λ npm install -g @sanity/cli
λ sanity init

Get started for free

Categorized in

Tailwind CSS