Question about the use of "leading-" with plugin

[solojungle]

Hey David,

First of all thank you so much for this plugin!

It seems like I cannot do the following:

className="leading-snug text-base"

The leading does not seems to change anything about the fluid text. My question is, is this intended? if so, is there a work-around to this issue?

[davidhellmann]

Hey @solojungle

thank you!
If you use the default config there is a line-height for each fluid step defined. You've to remove this like here:
https://play.tailwindcss.com/vCYxBuNAqR

module.exports = {
  mode: 'jit',
  theme: {},
  variants: {},
  corePlugins: {},
  plugins: [
        require('tailwindcss-fluid-type')({
            // your fluid type settings
            // works only with unitless numbers
            // This numbers are the defaults settings
            settings: {
                fontSizeMin: 1.125, // 1.125rem === 18px
                fontSizeMax: 1.25, // 1.25rem === 20px
                ratioMin: 1.125, // Multiplicator Min
                ratioMax: 1.2, // Multiplicator Max
                screenMin: 20, // 20rem === 320px
                screenMax: 96, // 96rem === 1536px
                unit: 'rem', // default is rem but it's also possible to use 'px'
                prefix: '' // set a prefix to use it alongside the default font sizes
            },
            // Creates the text-xx classes
            // This are the default settings and analog to the tailwindcss defaults
            // Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.
            values: {
                'xs': -2,
                'sm': -1,
                'base': 0,
                'lg': 1,
                'xl': 2,
                '2xl': 3,
                '3xl': 4,
                '4xl': 5,
                '5xl': 6,
                '6xl': 7,
                '7xl': 8,
                '8xl': 9,
                '9xl': 10,
            },
        }),
    ],
}

Or when you use TailwindCSS 3.3 you can the new shorthand like this:
https://play.tailwindcss.com/Z8fAiDOUG4

<h1 class="text-9xl/snug">The quick brown fox jumps over the lazy dogs</h1>

text-9xl/snug :) It's explained here: https://tailwindcss.com/blog/tailwindcss-v3-3#new-line-height-shorthand-for-font-size-utilities

Or... you use important like this: className="!leading-snug text-base"

but I think solution 1 or 2 is a better approach.
Hope that helps!

[solojungle]

David thank you so much for the response. These are some great suggestions, really appreciate it!

[SpiderDan98]

Hey David,

First of all I really like this plugin. Consequently, I have found myself in this situation several times.

In the past, I have always chosen the solution approach via important.
After coming across this issue, I would prefer approach 2 via the shorthand. It would be a much cleaner solution to the problem. However, the plugin does not support the shorthand.

As you can also see in your Playground, only the tailwind default plugin is executed there. Accordingly, the font size does not change between different screen sizes.

The generated CSS with the shorthand:

The generated CSS without the shorthand:

As you can see, it does not work as you would expect.

Would it be possible to support it?

[davidhellmann]

Ah, here was the comment :D
I'm a bit busy this week. I'll look into that, but I'm not sure if that's possible.