nextui-org / tailwind-variants

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

Compound Slots not working with variants #74

Closed rawnly closed 1 year ago

rawnly commented 1 year ago

Given the following configuration

const grid = tv({
  variants: {
    documents: {
      true: {},
    }
  },
  defaultVariants: {
    documents: true
  },
  slots: {
    general: 'col-span-7 row-span-4 card',
    chart: 'card !px-0 col-span-5 relative row-span-4',
    documents: 'row-span-6 col-span-5 card',
    flow: 'relative row-span-6 card'
  },
  compoundSlots: [
    // {
    //   slots: ['documents', 'chart', 'general', 'flow'],
    //   className: 'bg-violet-10',
    //   documents: false
    // },
    {
      documents: false,
      slots: ['documents'],
      className: 'hidden'
    }, {
      documents: false,
      slots: ['flow'],
      className: 'col-span-12'
    }, {
      documents: true,
      slots: ['flow'],
      className: 'col-span-7'
    }
  ]
})

// usage later
const { general, flow, documents, chart } = grid({ documents: true })

// i'd expect to have `col-span-12` applied below
// jsx
<div className={flow()} />

The variants are never applied 🤷‍♂️ (version 0.1.10). Maybe I misunderstood how to use them?

rawnly commented 1 year ago

Also in the docs the size is never specified in the example code

viktorbonino commented 1 year ago

I also have the same problem.

mskelton commented 1 year ago

I have a fix for this in #83