Warning in terminal: warn - ~text: Line height: Missing start value

[ynamite]

With the latest version I'm getting the warning warn - ~text: Line height: Missing start value as soon as I import tailwind.css (in my style.css) like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

My tailwind.config.js looks like this:

/** @type {import('tailwindcss').Config} */
import fluid, { extract, screens, fontSize } from 'fluid-tailwind'

module.exports = {
  content: {
    extract
  },
  theme: {
    screens,
    fontSize,
    extend: {
      colors: {
        primary: '#0D0D19',
        accent: '#575757'
      }
    }
  },
  plugins: [
    fluid({
      checkSC144: false
    })
  ]
}

Any ideas?

[barvian]

Thanks for filing. Could you share the ~text class(es) you're using (if any)?

[ynamite]

That's the thing, I'm not using any :/ I'm simply importing tailwind css.

[ynamite]

Would be awesome if fluid could name the source of the warning including some more context, like file and line number. It's almost impossible to troubleshoot currently. I honestly don't know where to start looking.

[barvian]

Would be awesome if fluid could name the source of the warning including some more context, like file and line number. It's almost impossible to troubleshoot currently

Yeah, I agree. I've actually done quite a bit of work to get it to its current state but Tailwind plugin error handling is very limited AFAIK (I don't think Tailwind itself keeps track of file or line number).

I'm also a bit confused how this warning could be coming up without any classes, and couldn't reproduce it in this sandbox: https://codesandbox.io/p/devbox/fluid-tailwind-5prf3k. Is your project open source or available to download? I'd be happy to try running it locally!

[ynamite]

I've managed to isolate the issue I think, the warning appears when you do this for instance: ~text-[1rem]/3xl

Here's a code sandbox to illustrate that: https://codesandbox.io/p/devbox/fluid-tailwind-forked-wm347p

It seems it only happens with ~text-. Not with ~px-[1rem]/8 as an example. But I was under the impression that setting an arbitrary value this way is valid, no? Am I missing something?

I don't know why it happens on my end even when there is just an empty body tag and no css except tailwind itself (as per your codesandbox example).

[barvian]

Ah, yeah this makes sense! Yeah, setting an arbitrary value this way is totally valid. With text, though, the default values (i.e. 3xl) also have line heights, so in this example the plugin doesn't know how to interpolate between 1rem (font size only) and the second one 3xl (font size + line height). I've gone back and forth on how to handle cases like these, because theoretically the plugin could probably use the relative line height from the second one. I forget why I decided against that but I'm currently exploring it again.

Anyway, for now you could just do ~text-[1rem]/[theme(fontSize.3xl)] (which pulls the font size without the line height) and set line height separately with i.e. ~leading-*/*. Curious to hear your thoughts on this.

[ynamite]

Ah I see, that makes total sense. So as far as I can tell, in a case like this line-height is simply not set, right?

I think the simplest solution would be to just get rid of the warning altogether. It most likely just leads to confusion – maybe that's just me. Apart from the warning message, the results I got were exactly what I expected intuitively. And if someone isn't happy with the result, they can simply set ~leading-x/y to whatever they want explicitly.

Or you could change the warning message to be more descriptive. I had no idea what was going on xD but again, ymmv.

Another solution could be something like this maybe: ~text-[1rem/1.5rem]/3xl or ~text-[1rem_1.5rem]/3xl not sure if that's possible, but this way we could set font-size and line-height in one go.

Thank you so much for your work with this plugin by the way, dig it!