Background color using any arbitrary value does not work

[beobast]

Hey,

First of all I would like to thank you for your great work.
I'm using tailwind-material-colors for my Nextjs/tailwind project and it's great!

I'm building my own react components following material 3 design system and I've noticed this:
using tailwind background color utility with an arbitrary value does not work.

For example this is not working:

<p class="bg-[#50d71e]">
  <!-- ... -->
</p>

I'm building a navigation drawer and I would like my scrim color to follow the token md.ref.palette.neutral-variant20.
But I don't think your plugin can produce this color, so I thought "nevermind let's hardcode the color since it's the same for light and dark mode". And unfortunately it doesn't work, is it because the tailwind-material-surfaces surfacePrefix used is "bg"?

[JavierM42]

Sorry for the long delay! I was on vacation, then swamped with work.

• I've added the scrim color on v3.1.0 so you might not need this anymore.
• You could also add any named colors to your config, those won't be overwritten unless there's a name conflict with the Material ones.
• Arbitrary background colors are indeed broken by the plugin. Sadly I don't think I have the time to spare to debug it in the near future. I've added a note to the docs in the meantime.

[abernier]

i like this, it prevents us from spawning arbitrary color values everywhere and encourages reusing semantic ones