Can I use "Arbitrary values" for variants and slots?

[uknmr]

I would like to use the Tailwind CSS "Arbitrary values" in variants and slots, but I couldn't figure out how to write it. Is there any documents or reference code?

const styles = tv({
  variants: {
    focusable: {
      true: 'some-classes',
    },
    tabbable: {
      true: 'some-classes',
    },
  },
  compoundVariants: [
    {
      focusable: true,
      tabbable: true,
      className: `max-h-[${someArbitaryValue}]`,
    },
  ],
})

// Can you pass `someArbitaryValue` to styled?
<SomeComponent className={styles({ focusable, tabbable })} />

I couldn't figure it out from the documents so I surpassed it by writing the following.

const styles = tv({...})
const maxHeightStyle = focusable && tabbable ? `max-h-[${someArbitaryValue}]` : ''

<div className={`${styles(...)} ${maxHeightStyle}`} />

[mskelton]

That is not valid Tailwind code, so this is not something that tailwind-variants will support. See the Tailwind docs about dynamic class names for why this is not valid.

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

[uknmr]

The class="w-[32rem]" is valid, but you think you don't need to use Tailwind if you write it dynamically in the style? https://tailwindcss.com/docs/width#arbitrary-values

[mskelton]

@uknmr The issue is with how Tailwind includes class names in the built CSS file. Take a look at the docs I linked to understand more, but basically it's looking for exact strings, but something like max-h-[${someArbitaryValue}] isn't an exact string, thus tailwind can't statically analyze what class names should be included in the output.

[uknmr]

Thanks!!! I understood it by actually writing and outputting it.