search

crswll / tailwindcss-theme-swapper

A helper for getting tailwind values into css custom properties and switching them between media queries and classes. You can try it out here: https://play.tailwindcss.com/Gt21fePNvv
320 stars 15 forks source link

How to use the opacity variant? #10

Closed Leravig closed 3 years ago

Leravig commented 3 years ago

Hey, I tried to use your variant with the opacity for the colors. But I don't get it to work.

error in ./src/assets/styles/tailwind.css Syntax Error: TypeError: value.charCodeAt is not a function

Setup: Tailwindcss 2.0.3 (tried it with 2.0.2) Postcss: latest (tried it with the versions 7.0.35 and 8.0.0)

crswll commented 3 years ago

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

Leravig commented 3 years ago

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.

crswll commented 3 years ago

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

crswll commented 3 years ago

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

Leravig commented 3 years ago

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