Can't specify ::variants in custom utilities created with matchUtilities()

[noah-nuebling]

Hi!

Context

I wrote a utility to add space of a custom size into text.

I can use it like this in html:

<p>Here<span class="space-inline-8"/>There</p>

And it will add space between the words "Here" and "There". I can increase the size of the space by replacing 8 with a larger number, or decrease the size of the space by replacing 8 with a smaller number.

Here's my definition of the utility inside tailwind.config.js:

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    extend: {
      // ...
    }
  },
  plugins: [

    plugin(function({ addUtilities }) {
      
      const thinSpace = '\u2009';

      const maxValue = 100

      const cssRules = {};
      for (let i = 1; i <= maxValue; i++) {
        cssRules[`.space-inline-${i}::before`] = {
          content: "'" + thinSpace.repeat(i) + "'",
        };
      }
    
      addUtilities(cssRules);
    }),
  ]
}

Problem

Note that my implementation is using addUtilites() – which is meant add static utilities - but then we're using a for-loop to create dynamic behaviour. I tried to use matchUtilities() - which is meant to add dynamic utilites – but I just couldn't get it to work. The reason is that I had to add the spaces as content of the before pseudo element and not the element itself for the spaces to show up in the document. (Not sure why). I could access the before element using addUtilites() by using the ::before variant on the selector, but I just couldn't access the before element using matchUtilities().

Solution

I hope that there will be a way to specify ::variants when adding utilities using matchUtilites(). Also, the way to do this using addUtilites() wasn't very obvious for me and I couldn't find any documentation. So I hope the documentation regarding this will be improved.

Thank you for taking my feedback into consideration.

If there's a way to do this, but I couldn't find it, then I'm sorry for the inconvenience.

[wongjn]

Here's how you could do it via matchUtilities().

[noah-nuebling]

Oh very cool, thanks for the quick answer! Sorry if this is a stupid or complicated question, but if you have time – do you have any tips on how I could have come up with this myself? Thanks!

[wongjn]

For JavaScript syntax, consider consulting the JavaScript section on MDN.
For matchUtilities() usage, consider consulting the Tailwind documentation on creating dynamic utilities.
For tips for complex syntax usage with any of the plugin functions, consider consulting the CSS-in-JS section in the Tailwind documentation.