Tailwind Typography not-prose working use case

typography-plugin.js

// just the changed bits
// and definitely not elegant yet

// withCommon: extract the top level CSS properties and magically push them down
// this is probably something you'd want to cache
function withCommon(v, list) {
  const common = list.filter(([k, v]) => !(typeof v == 'object' && v.constructor == Object))
  return {
    ...common.reduce((merged, [k, vPrime]) => {
      merged[k] = vPrime
      return merged
    }, {}),
    ...v,
  }
}

function configToCss(config = {}, { target, className, prefix }) {
  return Object.fromEntries(
    Object.entries(
      merge(
        {},
        ...Object.keys(config)
          .filter((key) => computed[key])
          .map((key) => computed[key](config[key])),
        ...castArray(config.css || {})
      )
    )
      .map(([k, v], idx, list) => {
        if (target === 'legacy') {
          return [k, v]
        }

        if (typeof v == 'object' && v.constructor == Object) {
          return [inWhere(k, { className, prefix }), withCommon(v, list)]
        } else {
          return null // drop all "common" props with our filter
        }
      })
      .filter((v) => !!v)
  )
}

not-prose

A working example of not-prose

Implementation

When looping styles, we drop anything that isn't in a [k, v] format where v is an object. Those are "common" styles, and we want to merge those down into all our prose sub-elements automatically.

For items when v is an object, we merge v on top of a reduced object containing our common styles. Currently this is massively unoptimized as a proof of concept. The [k, v] syntax was simply easier to reason about at the hour this was written.

Caveats

The max-width needs work. You simply cannot assign max-width on some children (like pre) without getting some weird side effects. The most likely solution is to take elements where max-width is the incorrect behavior and override those to 100%.

Headlines and larger font-size elements also will have the max-width problem. This is because it's based on the width of the 0 and not using rem. They probably would need to be rem for this to work reliably.