RyanClementsHax/tailwindcss-themer

Heads up about `color` dependency

Closed this issue · 2 comments

I haven't actually tested this in your repo (sorry, fairly busy), but independently I found that using the color dependency in the Tailwind config seems to interfere with Tailwind's ability to correctly evaluate arbitrary color-values.

Specifically, I found that calling the color() function on a named CSS color—dodgerblue, say—would cause classes like text-[dodgerblue] and bg-[dodgerblue] to return invalid rgb syntax (just for named CSS colors that I called color() on). I imagine there's some shared-dependency mutation thing going on.

You might want to test for this problem in your project. I ended up switching to chroma.js.

Thanks for opening the issue! I appreciate you looking out for me (I had no idea this could be a problem with color().

The good news is that named colors work with this plugin (I guess the version of color that I use handles the named colors? 🤷🏼‍♂️)

I actually happen to have an example of it being used in my personal site here.

I'll go ahead and close this since this plugin handles that case.

@RyanClementsHax

Just to clarify the problem that I encountered: it's not that color-values defined using syntax like color('dodgerblue') weren't working, but rather that any named CSS-color I called with color() could no longer be successfully used in a Tailwind arbitrary-value class.

So for example, if I called color('dodgerblue') in my Tailwind config (without even doing anything with the returned value!), then arbitrary-value utility-classes like text-[dodgerblue] and bg-[dodgerblue] would subsequently fail.

To test if this is a problem in your project, you'd want to call color('dodgerblue') somewhere in your Tailwind config, and then see what happens when you try using the text-[dodgerblue] utility-class in a component.

Cheers