Have people implemented utilities that have different values when combined?

[bkjohnson]

I'm trying to do something that feels a little complicated. I want to have leading values that are "fixed", so that I can create different scales for them at different font sizes. So for example, let's say I have this as the build output:

.leading-snug {
    line-height: 1.25rem;
}

However, for a larger text size I want to change what "snug" means:

.text-lg.leading-snug {
    line-height: 1.75rem;
}

And here is an example config:

{
  theme: {
    lineHeignt: {
        'snug: '1.25rem',
        xl: {
            snug: '1.75rem',
        }
    }
  plugins: [
    plugin(({ addBase }) => {
      addBase({
        '.text-xl': {
          '.leading-snug': { 'line-height': theme('lineHeight.xl.snug') },
    }),
  ]
}

However, if I was applying classes responsively, like xl:text-xl xl:leading-snug, I don't get the responsive prefixed output. Is there some way of achieving this kind of effect without a developer having to do things like create a parent/child relationship just for this?