Adding arbitrary properties via config file

[renet]

I recently added an arbitrary property to my project using the square bracket notation. This worked just as expected, only it was a bit long:

[mask-image:linear-gradient(to_bottom,red_0.375rem,transparent_0.375rem,transparent_0.625rem,red_0.625rem)]

And I asked ChatGPT whether there is a possibility to add mask-image helper classes via the Tailwind CSS config. It of course said "yes", lying to me, and told me all I had to do was adding the following to my Tailwind config file:

{
  theme: {
    extend: {
      maskImage: {
        'pattern': 'linear-gradient(to_bottom, red 0.375rem, transparent 0.375rem, transparent 0.625rem, red 0.625rem)',
      },
    },
  },
}

I tried it and, surprise, it didn't work, even though TypeScript told me everything was fine. But it got me thinking, shouldn't this be possible to do, theoretically, and wouldn't it be a nice little feature?

As a convention, unknown camelCased props could be converted to kebab-cased props and even custom CSS props like --myProp would work, if the conversion was skipped for properties starting with --. And "camel-cased": {} could be used as an alternative, anyway.

What do you think about this?

It's interesting to see that TypeScript lets me add unknown properties to the theme object, but it doesn't work for me, anyway. Guess this is for props that come with plugins? Or should this, in fact, already be working?

[adamwathan]

Hey! Yeah you'd want to make a little plugin if you wanted to put aliases in your config:

https://play.tailwindcss.com/I3Ihqjm7gF?file=config

[renet]

Thank you for your snippet, Adam! Will definitely use that in my project. But wouldn't it be awesome to have that behavior out-of-the-box? Or... would it be possible to write a plugin for "all kinds of unsupported or custom props"?