Add support for providing a default line-height for each font-size

[adamwathan]

This PR adds support for providing a default line-height for each font-size utility by allowing you to use a [fontSize, lineHeight] tuple in your config instead of just providing a fontSize value:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
       // Will embed no line-height value
      sm: '12px',

       // Will use `font-size: 16px` and `line-height: 24px`
      md: ['16px', '24px'],
    },
  },
}

.text-sm {
  font-size: 12px;
}

.text-md {
  font-size: 16px;
  line-height: 24px;
}

I've ensured that the fontSize utilities are positioned before the lineHeight utilities in the generated CSS, so even if you configure a default line-height for a particular font-size utility, you can still override it with a line-height utility:

<!-- Will still be `line-height: 1`, even though the default line-height for `text-md` is `24px` (as per the example config above) -->
<div class="text-md leading-none">

This is a purely additive change and no defaults have changed. We will probably update the defaults to include sensible line-height values in the next breaking release (2.0), likely many, many months away.

[tlgreg]

It does feel like to me that this should be a separate plugin, now fontSize does either one or two things and unless one includes the differentiation in the modifier name it doesn't show in the class-name.

[n10000k]

Could come in handy this by default, as long as the lineHeight utilities can supersede, should be fine. +1

[adamwathan]

It does feel like to me that this should be a separate plugin, now fontSize does either one or two things and unless one includes the differentiation in the modifier name it doesn't show in the class-name.

I think in practice you would only ever use one approach or the other for your entire config, and never mix and match. You'll always be able to slap a line-height utility on top to override the default either way 👍

[HeroicEric]

@adamwathan I'm super excited that you added this because we have been bikeshedding how we wanted to do this for our design system and now we don't have to 😄

Do you have any thoughts about doing something similar for font-weight? Our design system has a few font-sizes (xl, 2xl, 3xl, 4xl) that should only ever be used in combination with .font-medium, so we'd like to make that the default for those sizes to reduce the chance of making a mistake.

I'd be happy to work on adding this if it's something you'd be interested in.

[BrandonSurowiec]

@HeroicEric No reason you can't just add it in your stylesheet. This is what I do for letter-spacing:

@responsive {
    .text-xs { letter-spacing: 0; } /* 12px */
    .text-sm { letter-spacing: -0.006em; } /* 14px */
    .text-base { letter-spacing: -0.011em; } /* 16px */
    .text-lg { letter-spacing: -0.014em; } /* 18px */
    .text-xl { letter-spacing: -0.017em; } /* 20px */
    .text-2xl { letter-spacing: -0.019em; } /* 24px */
    .text-3xl { letter-spacing: -0.021em; } /* 30px */
    .text-4xl { letter-spacing: -0.022em; } /* 36px */
    .text-5xl { letter-spacing: -0.022em; } /* 48px */
    .text-6xl { letter-spacing: -0.022em; } /* 64px */
}

@tailwind utilities;

[HeroicEric]

thanks @BrandonSurowiec I'd rather have it as part of the Tailwind config though.