How to use the opacity variant? about tailwindcss-theme-swapper HOT 5 CLOSED

Hey, sorry for the late response. It works pretty fine. Thank you for your help

from tailwindcss-theme-swapper.

Can you provide a little more detail? A config should do the trick. If possible posting it here would be really nice: https://play.tailwindcss.com/XbeJ1IvcSW?file=config

from tailwindcss-theme-swapper.

Found the problem:
https://play.tailwindcss.com/VOBFwfThPA?file=config

I use the plugin flattenColorPalette

Using it without the themeSwapper I get the following colors

primary: '#f00'
secondary: '#0f0'

and with it it looks like this

primary: [Function (anonymous)],
secondary: [Function (anonymous)],

It seems that they do not work together. Maybe you have an idea how to fix it.

from tailwindcss-theme-swapper.

So, the issue isn't flattenColorPalette I don't think, it's that css-in-js doesn't know what to do with the function that borderLeftColor is getting. You can call it, if it's a function, with the color proper variable.

So you can do like:

  const resolveColor = (maybeFunction) =>
    typeof maybeFunction === 'function'
      ? maybeFunction({ opacityVariable: '--tw-border-opacity' })
      : maybeFunction

and use it for the value given to borderLeftColor like: { borderTopColor: resolveColor(colors[color]) }.

Here's it goes working without the flatten (but it should still work just fine with the flatten): https://play.tailwindcss.com/eNm42UuZSS?file=config

from tailwindcss-theme-swapper.

Going to close this for now. Let me know if there's anything I can do to help out!

from tailwindcss-theme-swapper.