Tailwind-variants

[mthmcalixto]

Any way to use tailwind-variants?

https://www.tailwind-variants.org/docs/introduction

[ben-rogerson]

No but keen on starting to think about this.

I'm unsure how TypeScript would work with this integration, so that's an area that needs some thought.

But perhaps the tw import could do a simple conversion that passes no config:

import tw from 'twin.macro';

const Button = tw.button`block`;
 
<Button>Click me</Button>

// ↓ ↓ ↓ ↓ ↓ ↓

import { tv } from 'tailwind-variants';
 
const button = tv({ base: "block" });

<button className={button()}>Click me</button>

And the tw prop would be similar:

import 'twin.macro';

<button tw="block">Click me</Button>

// ↓ ↓ ↓ ↓ ↓ ↓

import { tv } from 'tailwind-variants';
 
const button = tv({ base: "block" });

<button className={button()}>Click me</button>

The styled import could allow the full tailwind-variants component config:

import { styled } from 'twin.macro';

const Button = styled.button({
  base: "...",
  variants: {...},
  compoundVariants: [...],
  defaultVariants: {...}
});
 
<Button data={{ size: 'sm', color: 'secondary' }}>Click me</Button> // < Unsure of calling this prop "data"

// ↓ ↓ ↓ ↓ ↓ ↓

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: "...",
  variants: {...},
  compoundVariants: [...],
  defaultVariants: {...}
});
 
<button className={button({ size: 'sm', color: 'secondary' })}>Click me</button>

And the css prop syntax could look like you're passing the config into the css prop as an argument:

import { styled } from 'twin.macro';

const config = ({
  base: "...",
  variants: {...},
  compoundVariants: [...],
  defaultVariants: {...}
});
 
<button css={[{ size: 'sm', color: 'secondary' }, config]}>Click me</button>

// ↓ ↓ ↓ ↓ ↓ ↓

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: "...",
  variants: {...},
  compoundVariants: [...],
  defaultVariants: {...}
});
 
<button className={button({ size: 'sm', color: 'secondary' })}>Click me</button>

It would be pretty crazy if twin supported the slot syntax like this:

import { styled } from 'twin.macro';

const Card = styled({
  slots: {
    base: "block",
    small: "text-sm"
  },
});

<Card.figure slot="base">...</Card.figure>
<Card.div slot="small" />...</Card.div>
// Could alternatively use an as prop, eg: `<Card as="div" slot="small" />`
 
// ↓ ↓ ↓ ↓ ↓ ↓

import { tv } from "tailwind-variants";
 
const card = tv({
  slots: {
    base: "block",
    small: "text-sm"
  },
});
 
const { base, small } = card();
 
<figure className={base()}>...</figure>
<div className={small()}>...</div>

[mthmcalixto]

@ben-rogerson Thank you for responding, it would be truly amazing if you could pass slots directly to the export.

Do you think this might be possible soon?

If there were a way to place 'tv' just like you put 'tw' inside the code, using ${tw``}.

I believe there must be some alternative or way to do it.

[ben-rogerson]

Quite a bit of work here so I don't think a full integration is possible soon.
I could look into an experimental integration with just the tw import perhaps.

Could you let me know more what you mean by "put 'tw' inside the code?" - a usage example would help

[mthmcalixto]

@ben-rogerson Something like:

const button = tv({
  base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
  variants: {
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-purple-500 text-white",
    },
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "px-4 py-3 text-lg",
    },
  },
  compoundVariants: [
    {
      size: ["sm", "md"],
      class: "px-3 py-1",
    },
  ],
  defaultVariants: {
    size: "md",
    color: "primary",
  },
})

export const ButtonNew = styled.div`
  ${tw`${button({ size: "md" })}`}
`

We can also try to pass the props instead of the size.

I tried something like but it doesn't generate the css:

import { tv, type VariantProps } from "tailwind-variants"
import tw, { styled } from "twin.macro"

const button = tv({
  base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
  variants: {
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-purple-500 text-white",
    },
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "px-4 py-3 text-lg",
    },
  },
  compoundVariants: [
    {
      size: ["sm", "md"],
      class: "px-3 py-1",
    },
  ],
  defaultVariants: {
    size: "md",
    color: "primary",
  },
})

type ButtonVariants = VariantProps<typeof button>

interface ButtonProps extends ButtonVariants {
  children: React.ReactNode
}

export const ButtonNew = styled.button<ButtonProps>(({ color, size }) => {
  const className = button({ color, size })

  return tw`${className}`
})

[ben-rogerson]

Twin needs full classes to work with, and can't read which classes are in the classname object.
The sorts of conversions in your examples aren't possible in babel as the transform has to happen before tailwind-variants can run.

Another thing is - currently in each integration twin converts tailwind classes to css objects - this wouldn't be the case with tailwind-variants would need to perform other code transformations instead. Not a deal breaker, but definitely a departure from the norm and means we can't rely on existing functions/features.
Right now I feel perhaps theres too much time/effort/code required to create a high quality, usable integration but I'll think about it more while looking at some other integration options, eg: panda css.

[mthmcalixto]

@ben-rogerson He looks interesting too.