Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending variants doesn't work when passing classes as an array #206

Open
ApplePieGiraffe opened this issue Jul 9, 2024 · 4 comments
Open
Labels
bug Something isn't working

Comments

@ApplePieGiraffe
Copy link

Describe the bug
I'm using an array to pass class names into tailwind-variants

const styles = tv({
  base: [],
  variants: {
    type: {
      primary: ["bg-red-500"],
    },
  },
});

If I extend those styles and use an array to pass class names into the extended styles

const extendedStyles = tv({
  extend: styles,
  variants: {
    type: {
      primary: ["bg-green-500"],
    },
  },
});

Neither the original or extended styles get applied to the element. Instead the dev tools show

<button class="[object Object]">Count: 0</button>

To Reproduce
See this Codesandbox

Expected behavior
The extended styles should override the original styles and be applied to the element

@ApplePieGiraffe ApplePieGiraffe added the bug Something isn't working label Jul 9, 2024
@ian-os
Copy link

ian-os commented Jul 15, 2024

extend takes string not a tv() object

@tianenpang
Copy link
Member

Hi @ApplePieGiraffe @ian-os for now, the temporary fix is to change the array to a string, and will look into this issue 🤔

@I-am-tk
Copy link

I-am-tk commented Aug 14, 2024

@tianenpang Changing main value from "main": "dist/index.cjs" to "main": "dist/index.js" in package.json seems to resolve this issue. 🤔 .

@thefalked
Copy link
Contributor

Hello everyone, sorry for the delay, this is really an issue. I already had a PR merged to fix this but for some reason @mskelton didn't release it. It was merged 20 of March, i tried to remove the join('') on the array i'm using to temporary fix and decided to check here since it's bugging yet. I'll try to check with the discord group to see if someone can do the release with the new stuff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants