Line height issues when using "useTailwindFontSize()"

sage
1

My bud.config.js has .useTailwindFontSize() enabled. The Tailwind sizes all show up on the backend fine - I can select (for example) 6xl and apply it to a paragraph element. On the front, the text appears with the correct class - has-6-xl-font-size. However, the size changes but the line height doesn’t, making this approach unusable without custom CSS.

Backend:

image

image
image1748×940 107 KB

Frontend:

image
image1760×306 79.7 KB

To get it to display properly I have to add this as custom CSS which seems a bit odd:

.has-6-xl-font-size {
    @apply text-6xl;
}

Is it supposed to be like this?

Is it possible to sort this somewhere in a config file so that the Tailwind sizes output different line heights too?

2

“Custom CSS” is such an odd phrase. But yes, you’re gonna have to write some CSS. The theme.json generator is taking the values from the Tailwind config and plugging them into the editor. Sage does not include editor CSS by default and leaves the implementation up to you.

AFAIK, Gutenberg does not currently support defining a line height for a font size:

https://github.com/WordPress/gutenberg/issues/27100#issuecomment-1278257784

1 Like
3

Thanks Ben - good to know all this.