Issue using tracking with responsive font sizes

[allforabit]

Thanks for the great plugin. It's working great so far on the project I'm working on. I'm facing an issue with using the tailwind tracking classes with responsive font size. When I set the font-size to change for instance at the md breakpoint and also set the tracking class it will not apply the new font size and instead will go with the base size.

E.g. tracking-widest text-sm md:text-lg won't apply the the large font size at the medium breakpoint where text-sm md:text-lg would work as expected.

[semencov]

Thanks for letting me know. This seems to be the similar problem mentioned in #20: the way the Tailwind processes variants does not work with nested selectors currently used in my implementation. Perhaps dynamic tracking adjustment wasn't a good idea, I don't see any practical causes to use it. So, probably I should remove it and keep applying dynamic metrics to the default (base) values only? This could potentially fix both this issue and #20.

Unfortunately, due to the lack of time, it's going to be slow on finding some best solution, sorry. So, any suggestions or help will be appreciated.

[allforabit]

Hi @semencov thanks for getting back to me. I'm don't actually know that much about dynamic tracking. If you give me an overview of what you think should be implemented I can put together a PR. And if you can give me some guidance on which files, etc I'd need to change that would be great!

[zawilliams]

Trying to change the leading and can't override the line height without applying an important class (i.e. !leading-6) to the text I'm targeting, which isn't ideal. Any way to disable the line height being added? Or could these styles (line-height and letter-spacing) be applied to the base classes instead of at the utility level?

[xApep]

Any updates about this?

If I set <p class="text-2xl md:text-4xl">word</p>

it will generate:

html .text-2xl, html.text-2xl {
  line-height: 2rem;
  font-size: 1.5rem;
  letter-spacing: -0.019492328em;
}

@media (min-width: 768px)
  .md\:text-4xl {
      font-size: 2.25rem;
      line-height: 2.5rem;
  }
}

and of course since somehow "html" is added to text-2xl it overrides the md: sizes.

so the solution would be to just never add html to none breakpoint font sizes?

[semencov]

Hey, sorry for the delay, I'm totally out of spare time this year.

Most probably I will totally refactor the addon in the next several months to avoid some limitations it has.

If you have a quick fix in mind, i would be appreciated if you could share.