leading-normal should have apply line-height: normal and not line-height: 1.5

[mrleblanc101]

What version of Tailwind CSS are you using?

3.4.1

What build tool (or framework if it abstracts the build tool) are you using?

vite 5

What version of Node.js are you using?

20

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

Confusingly, leading-normal apply line-height: 1.5 instead of line-height: normal.
There is no way to opt into the font file default line-height.
You can always use leading-[normal], but that seems weird.
I think line-height: 1.5 should be rename leading-regular or something similar ?

[RobinMalfait]

Hey!

The names and values are some defaults we chose, if you want you can override leading-normal via your tailwind.config.js file.

More info: https://tailwindcss.com/docs/line-height#customizing-your-theme
E.g.: https://play.tailwindcss.com/ER0Fpktyif?file=config

Hope this helps!

[mrleblanc101]

@RobinMalfait I know this, but still I wonder if the defaults are right for this property. Maybe it could be reconsidered for Tailwind v4 since it would obviously be a breaking change.

Here is how I've set it up, which is more logical imho:

export default {
    theme: {
        extend: {
            ...
            lineHeight: {
                normal: 'normal',
                regular: '1.5',
            },
            ...
        },
    },
};

[adamwathan]

@mrleblanc101 Yeah I think it is a regrettable name, and in hindsight I think I actually would never have included the relative values we have (like "tight", "loose", "normal", etc.) because in our own projects we only use the fixed values.

I'm hesitant to change it though just because of it being a significant breaking change 😕 Even when we do a major version I try to be very conservative with breaking changes — we're "allowed" to do them of course but they cause people a lot of headache.

I think if we made a change here I'd probably remove all of the named values and include a snippet in the upgrade guide for bringing them back. Will throw it on my list of stuff to consider before we ship a stable release 👍

[mrleblanc101]

I understand removing value like tight and loose which are arbitrary could be a good idea, but since "normal" is a valid CSS value, I think it should be supported by default ! Seems weird to have CSS properties and value that have no mapping in tailwind

[adamwathan]

Yeah if I remember right we named it that because we universally set the line-height to 1.5 in Preflight:

https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css#L32

...which I think was inspired by Bootstrap's default line-height.

With that being the globally reset line-height value, it made sense to me that normal would mean "the line-height you'd get if you didn't set a line-height", and that would be 1.5 because of the reset.

Still agree though, I'd make a different decision today!