# Line height issues when using "useTailwindFontSize()"

**URL:** https://discourse.roots.io/t/line-height-issues-when-using-usetailwindfontsize/24712
**Category:** sage
**Tags:** bud
**Created:** 2023-02-03T12:34:46Z
**Posts:** 3

## Post 1 by @raffjones — 2023-02-03T12:34:46Z

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](https://discourse.roots.io/uploads/default/original/2X/3/3e40f8b5464716b77a16d5a92e8d3378f27ffedf.png)

 ![image](https://discourse.roots.io/uploads/default/original/2X/9/9229e87d8e67bffe4f933ec9c7d370f665a4f5c3.jpeg)

Frontend:

 ![image](https://discourse.roots.io/uploads/default/original/2X/a/a5b4f7a4aeb05d1b236ee07a66558bf683289ff2.jpeg)

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?

---

## Post 2 by @ben — 2023-02-03T15:03:38Z

“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](https://github.com/WordPress/gutenberg/issues/27100#issuecomment-1278257784)

---

## Post 3 by @raffjones — 2023-02-03T15:32:16Z

Thanks Ben - good to know all this.