Is there any way to receive 2 or more abritrary values?

[scv057]

I want to create a class that can receive mutiple abritrary values like my-class-{v1}-{v2}, how can I achieve it?

I tried matchUtilities seems only can receive one value.

Can anybody help me? many thanks🙏🏻🙏🏻🙏🏻

[wongjn]

Have some kind of predetermined delimiter in the arbitrary value and then split the value by this delimiter.

For example, here we use a plus sign (+) as a delimiter:

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require('tailwindcss/plugin')(({ matchUtilities }) => {
      matchUtilities({
        'my-class': value => Object.fromEntries(
          value.split('+').map((v, i) => [`--foo-${i}`, v])
        ),
      });
    })
  ],
}

Then you'd use arbitrary values like my-class-[a+b+c].

See this Tailwind Play for a working example (open the Generated CSS panel to see the CSS results).

[scv057]

Thank you very much!!

[kingscode-big]

thanks ,,this has reaally helped me

[orimay]

Is there a way to do so in TailwindCSS v4?

[wongjn]

You can support up to 2 values using --value() and --modifier(). See https://tailwindcss.com/docs/adding-custom-styles#modifiers for details. Otherwise, if you need more values, you'd need to split them up into separate class names and use CSS variables to "compose" them together.

[orimay]

Yeah, this get very ugly. I need to support colors with arbitrary hue shifts and opacity

[orimay]

Wouldn't have been much of an issue if I could use SCSS to generate Tailwind config