leading-loose unable to override line-height from xl:text-6xl due css definition order

[bithavoc]

What version of Tailwind CSS are you using?

3.0.2

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

• postcss@8.4.4
• postcss-cli@9.0.2
• nextjs or postcss-cli or gulp@4.0.2

What version of Node.js are you using?

• Node v14.16.1

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS and Windows

Reproduction URL

https://github.com/widemeshio/bug-tailwind-v3-leading-vs-text-height

Describe your issue

In a brand new Next.js project(or also legacy using v3 and gulp with postcss),
leading-loose css classes are generated before screen size variants(md, xl, etc) so because what matters is the order in which the css classes are defined not in the order they're used in class="", its currently not possible to do something like lg:text-6xl leading-loose because lg:text-6xl's line-height takes priority. text-6xl leading-loose works though, so this is specific about screen size variants.

Example code:

     <main className="w-1/4">
        <h3 className="text-6xl leading-loose text-green-600">
          text-6xl + leading (OK)
        </h3>
        <h3 className="lg:text-6xl leading-loose text-red-600">
          lx:text-6xl + leading (Buggy)
        </h3>
      </main>

Inspector:

Page View:

[reinink]

Hey! So this is actually expected behavior, which you can find explained in the documentation here:

https://tailwindcss.com/docs/line-height#breakpoints-and-media-queries

It’s important to note that by default, Tailwind’s font-size utilities each set their own default line-height. This means that any time you use a responsive font-size utility like sm:text-xl, any explicit line-height you have set for a smaller breakpoint will be overridden.

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl">
  Maybe we can live without libraries...
</p>

If you want to override the default line-height after setting a breakpoint-specific font-size, make sure to set a breakpoint-specific line-height as well:

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
  Maybe we can live without libraries...
</p>

Using the same line-height across different font sizes is generally not going to give you good typographic results. Line-height should typically get smaller as font-size increases, so the default behavior here usually saves you a ton of work. If you find yourself fighting it, you can always customize your font-size scale to not include default line-heights.

Hope that helps! 💪

[bithavoc]

Amazing, thanks @reinink 🚀

[pljspahn]

This is kind of bugging me. I am using line-height to center text vertically:

    <div class="w-full h-24">
        <a href="{% url 'current-sale-list' %}" class="font-display italic leading-[6rem] lg:leading-[6rem] text-2xl lg:text-6xl" >
            {{settings.utils.BannerSettings.banner_text}}
        </a>
    </div>

I'd like to just keep the line height at 6rem at all breakpoints since the parent is set to h-24 (6rem), but since it gets overridden I'm forced to declare it twice. Once for default and once again for because lg:text-6xl overrides it.

Not really a big deal but it's kind of confusing at first and repeating the same style twice feels gross. I've never really liked centering text vertically is done in CSS, so maybe I should use a different method, but I generally prefer this method.

[reinink]

@pljspahn Hey, if you don't want this behavior, you can disable the size-specific line-heights. You can read more about this in the Tailwind CSS v2 upgrade guide here: https://v2.tailwindcss.com/docs/upgrading-to-v2#configure-your-font-size-scale-explicitly

Basically just update the fontSize property in your tailwind.config.js file to only include the font sizes, and not the line-height values.

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      xs: '0.75rem'
      sm: '0.875rem'
      base: '1rem'
      lg: '1.125rem'
      xl: '1.25rem'
      2xl: '1.5rem'
      3xl: '1.875rem'
      4xl: '2.25rem'
      5xl: '3rem'
      6xl: '3.75rem'
      7xl: '4.5rem'
      8xl: '6rem'
      9xl: '8rem'
    },
  }
}

[pljspahn]

Thanks.

I'm happy leaving the default config alone, and for now I've added a plugin text-vert where I can set line-height, height, and font-size explicitly on the element:

    plugin(function({matchUtilities, theme}) {
        matchUtilities(
            {
                'text-vert': (value) => ({
                    lineHeight: value+'rem',
                    height: value+'rem',
                    fontSize: value/2+'rem',
                }),
            },
            { values: theme('lineHeight') },
        )
    }),

I had avoided figuring out plugins previously but I suppose now is as good a time as any to learn it.

[MichaelAllenWarner]

@pljspahn and any lurkers:

If you want to keep the line-heights in your default text- classes but still have the option to set only the font-size, I think you can accomplish this with a custom text-size- utility that references your theme's fontSize values:

matchUtilities(
  {
    'text-size': (value) => ({ fontSize: value }),
  },
  {
    values: Object.fromEntries(
      Object.entries(theme('fontSize') || {}).map(([key, value]) => [
        key,
        Array.isArray(value) ? value[0] : value,
      ])
    ),
  }
);

[asgarovf]

@pljspahn Hey, if you don't want this behavior, you can disable the size-specific line-heights. You can read more about this in the Tailwind CSS v2 upgrade guide here: https://v2.tailwindcss.com/docs/upgrading-to-v2#configure-your-font-size-scale-explicitly

Basically just update the fontSize property in your tailwind.config.js file to only include the font sizes, and not the line-height values.

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      xs: '0.75rem'
      sm: '0.875rem'
      base: '1rem'
      lg: '1.125rem'
      xl: '1.25rem'
      2xl: '1.5rem'
      3xl: '1.875rem'
      4xl: '2.25rem'
      5xl: '3rem'
      6xl: '3.75rem'
      7xl: '4.5rem'
      8xl: '6rem'
      9xl: '8rem'
    },
  }
}

Some formattings:

module.exports = {
  theme: {
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '3.75rem',
      '7xl': '4.5rem',
      '8xl': '6rem',
      '9xl': '8rem',
    },
  }
}