nextui-org / tailwind-variants

🦄 Tailwindcss first-class variant API
https://tailwind-variants.org
MIT License
2.42k stars 68 forks source link

Putting "text-{color}" class in the same variant as "text-{size}" class removes the color class #94

Closed wilsonlewis closed 1 year ago

wilsonlewis commented 1 year ago

Describe the bug Putting "text-{color}" class in the same variant as "text-{size}" class removes the color class

To Reproduce Steps to reproduce the behavior:

  1. Add tokens to tailwind config
const config = {
  theme: {
    colors: {
      ...
      white: '#FFFFFF'
    },
    fontSize: {
      ...
      '14': '0.875rem'
    }
  }
}
  1. Create variant

    export const button = tv({
    variants: {
    intent: {
      primary: 'text-white text-14',
    },
    },
    defaultVariants: {
    intent: 'primary',
    },
    })
  2. Add to component

    function Component() {
    return <button className={button()}>Button</button>
    }
  3. Check DOM and notice missing classes

Expected behavior No tailwind classes should be removed

Screenshots Notice "text-emerald" has been removed

Screenshot 2023-08-20 at 8 38 27 PM Screenshot 2023-08-20 at 8 38 59 PM

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

jrgarciadev commented 1 year ago

Hi @wilsonlewis please check this comment

https://github.com/nextui-org/tailwind-variants/issues/93#issuecomment-1685115214