[v4] Questions about @utility, maybe an intellisense issue, and default variables

[qexk]

@utility

In v3, I had this plugin:

matchComponents(
    { typo: value => (typeof value === 'string' ? {} : value) },
    {
        values: {
            'title-1'   : { fontSize: '3rem'   , lineHeight: '4rem'    },
            'title-2'   : { fontSize: '2.75rem', lineHeight: '4rem'    },
            'title-3'   : { fontSize: '2.5rem' , lineHeight: '3rem'    },
            'body'      : { fontSize: '2rem'   , lineHeight: '2.25rem' },
            'small'     : { fontSize: '1.75rem', lineHeight: '2rem'    },
            'annotation': { fontSize: '1.5rem' , lineHeight: '1.75rem' },
            'logs'      : { fontSize: '1.5rem' , lineHeight: '1.75rem', fontFamily: theme('fontFamily.mono') },
        },
    },
);

I tried porting it to v4 like this, it works:

@theme {
    …
    --x-typo-font-size-title-1: 3rem;
    --x-typo-font-size-title-2: 2.75rem;
    --x-typo-font-size-title-3: 2.5rem;
    --x-typo-font-size-body: 2rem;
    --x-typo-font-size-small: 1.75rem;
    --x-typo-font-size-annotation: 1.5rem;
    --x-typo-font-size-logs: 1.5rem;
    --x-typo-line-height-title-1: 4rem;
    --x-typo-line-height-title-2: 4rem;
    --x-typo-line-height-title-3: 3rem;
    --x-typo-line-height-body: 2.25rem;
    --x-typo-line-height-small: 2rem;
    --x-typo-line-height-annotation: 1.75rem;
    --x-typo-line-height-logs: 1.75rem;
    --x-typo-font-family-logs: var(--font-mono);
    …
}

@utility typo-* {
    font-size: --value(--x-typo-font-size- *);
    line-height: --value(--x-typo-line-height- *);
    font-family: --value(--x-typo-font-family- *);
}

I see three issues:

• Is this really how you’re supposed to write it?
• Prettier plugin adds a space before the asterisks, tailwind seems to accept it, but it looks like a bug.
• Intellisense shows duplicates for autocompleting typo-: 3 for typo-logs and 2 for the others:
  

Undocumented variables

While looking at the generated css, I noticed the existence of default variables like these:

• --default-font-family
• --default-mono-font-family

Are they supposed to be reserved for tailwind’s internals, or can we use them?

[wongjn]

Is this really how you’re supposed to write it?

Seems about right.

---

Prettier plugin adds a space before the asterisks, tailwind seems to accept it, but it looks like a bug.

Yes, as per a message in the Discord server from a maintainer:

Prettier injects spaces before * for no good reason, but we made it work internally even with those spaces present: https://play.tailwindcss.com/ZhEMylu2N5?file=css

---

Intellisense shows duplicates for autocompleting typo-: 3 for typo-logs and 2 for the others:

Yes, this seems like a bug where the intellisense adds a candidate for each of the non-empty CSS properties for the class.