feature suggestions

[fccoelho7]

Hey all! some time ago I started an open-source project called Nullwind, it's a components system that uses Tailwind. We're willing to use Tailwind Variants but miss some features described below.

1. ability to apply compound variants based on a boolean

in our case, we have a button with different colors, and this same button has a prop called outline which applies outline styles following the chosen color. for example:

<Button color="secondary" outline />

to achieve it, we needed to create something like the following:

const button = tv({
  variants: {
    color: {
      primary:
        "text-white bg-primary-500 border border-transparent hover:bg-primary-800 disabled:hover:bg-primary-500",
    },
    outline: {
      primary:
        "text-primary-500 bg-white border border-primary-500 hover:bg-primary-50 disabled:hover:bg-white",
    },
  }
})

const Button = ({ color, outline, class: klass }) => {
  <button
    class={button({
      color,
      ...(outline && { outline: color }),
      class: klass,
    })}
  >Click here!</button>
}

after doing that, I noticed the outline type is being mistyped. is there any other way to achieve what we're looking for?

2. ability to extend more than one theme

In our framework, the user is able to style the components globally, locally, or via class. check here

[baseTheme, globalTheme, localTheme, class]

we were able to achieve it but needed to create a complex logic that merges these objects. it'd be cool if we had any way to extend multiple themes, so we can use the TV engine to replace all the necessary properties correctly.

our workaround:

const button = tv({ extend: buttonTheme, ...mergeThemes(context.theme, props.theme)?.button });
button({ ...props, class: props.class })

suggestion:

const button = tv({ extend: [buttonTheme, tv(context.theme.button), tv(props.theme.button)] });
button({ ...props, class: props.class })

I'd love to discuss more about these requested features 😄

[AbdallahAlhaddad]

Same here, I was going to open a discussion for a similar idea as feature 2

Suggested usage (example in vue3):

<script setup lang="ts">
import { tv } from 'tailwind-variants'

// 1. Ability to declare TVOptions separately in a type-safe manner:
const defaultButtonTheme:TVOptions = {
  base: 'px-4 py-1.5 rounded-full hover:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 text-white',
      neutral: 'bg-zinc-500 text-black dark:text-white',
    },
    flat: {
      true: 'bg-transparent',
    },
  },
  defaultVariants: {
    color: 'primary',
  },
  compoundVariants: [
    {
      color: 'primary',
      flat: true,
      class: 'bg-blue-500/40',
    },
    {
      color: 'neutral',
      flat: true,
      class: 'bg-zinc-500/20',
    },
  ],
}

// 2. Ability to extract variant props from the TVOptions separately
type ButtonVariants = ExtractVariantProps<typeof buttonTheme>

// 3. Define Button Props:
interface ButtonProps extends ButtonVariants {
  theme?: PartialDeep<typeof defaultButtonTheme> // ability to override the theme from a prop (force exact variants and slots, while allowing more compound variant)
}
const props = defineProps<ButtonProps>()

// 2. Merge Themes
const mergedTheme=mergeThemes([defaultButtonTheme, props?.theme, ...])

// 3. Use final theme
const button = tv(mergedTheme)
</script>

<template>
  <button :class="[button()]"></button>
</template>

[mskelton]

Regarding point 1. compoundVariants exists to solve the very problem you are describing.

const button = tv({
  variants: {
    color: {
      primary: "text-white bg-primary-500 border border-transparent hover:bg-primary-800 disabled:hover:bg-primary-500",
    },
    outline: {
      true: "",
    },
  },
  compoundVariants: [
    {
      color: "primary",
      outline: true,
      class: "text-primary-500 bg-white border border-primary-500 hover:bg-primary-50 disabled:hover:bg-white",
    },
  ],
});

const Button = ({ color, outline, class: klass }) => {
  <button
    class={button({
      color,
      outline,
      class: klass,
    })}
  >Click here!</button>
}

Regarding point 2, feels pretty niche to be honest, and something that probably should remain in user-land anyway given that the needs for such a specialized feature would likely differ depending on the use case, making it tough to generalize.

Also, I'm not sure I even understand the ask, is the theme basically just props to pass to the result of the tv function? If so, why doesn't something like this work?

const buttonStyles = tv(...)

buttonStyles({ ...globalTheme, ...localTheme })