Bad DX: [object Object] appearing in CSS when customizing typography

[carbontwelve]

What version of @tailwindcss/typography are you using?

0.5.10

What version of Node.js are you using?

v20

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/gujEeAoZXy

Describe your issue

This is an issue that has previously been described in #189 and elsewhere. It's known to be caused due to the Tailwind theme helpers return value sometimes being an array. For example theme('fontSize.base') returns ["1rem", {lineHeight: "1.5rem"}]

Given my understanding of Tailwind v3, the following would result in both the font size and line height being set from the theme return value:

h2: {
    fontSize: theme('fontSize.base')
},

Based upon the documentation available at https://tailwindcss.com/docs/typography-plugin#customizing-the-css given that color: theme('colors.gray.800') sets the text colour, it can be assumed that fontSize: theme('fontSize.base') works the same; it not doing so and resulting in [object object] in the css output is to my mind incorect and buggy behaviour and at the very least poor DX.

The [object object] behaviour was considered a bug in Tailwind v2, I consider this a bug in the typography plugin and the current solution of "just use theme('fontSize.base')[0]" to be problematic.

Documentation on "customising the css" needs clarification and the addition of a working example setting the font size and an additional example optionally merging in the additional styles attached to the theme helpers response.

[adamwathan]

Fair point, added a note about it to the docs 👍

https://github.com/tailwindlabs/tailwindcss-typography#customizing-the-css