Usage with CVA

[bengry]

Is twin.macro supported when also using cva?

cva gives a great API to work with and manipulate classes, but when using it with tailwind you end up with a mash of a million class names, even for relatively simple components:

Is it possible to utilize twin.macro to reduce the number of classes? Even if not one for the entire component, something like this would also be perfectly acceptable:

export const button = cva({
  base: [
    /* style */ tw`inline-flex min-h-control cursor-pointer items-center justify-center gap-2 rounded-md text-sm transition-colors`,
    /* focus ring */ tw`ring-accent-focus-ring ring-offset-2 focus-visible:outline-none focus-visible:ring-2`,
    /* disabled */ tw`disabled:pointer-events-none aria-disabled:pointer-events-none`,
  ],
})

P.S.
The above uses cva@beta, so the API is a bit different than v1, but the idea is the same.

[ben-rogerson]

Unfortunately this won't work.
If twin was capable of converting the twin syntax (eg: focus:(block mt-2)) to tailwind classes rather than css objects then this would probably work.

[bengry]

Thanks @ben-rogerson. What do you mean by "css objects"? Does the twin macro (and similar ways of using this) "simply" convert the twin syntax to a "css prop" (styled-components, emotion), and let babel take it as usual from there? i.e. converts something like tw`flex` to css={`display: flex`}.
I didn't read twin's code, so this is an educated guess based on your response.

[ben-rogerson]

The tw import converts tailwind classes to css objects like this:

tw`flex`
// ↓ ↓ ↓ ↓ ↓ ↓
({ display: "flex" })

Check the how it works section in the twin readme for a little more detail.

And with the tw prop, the conversion looks like this:

<div tw="hidden" />
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
<div css={{ "display": "none" }} />

[bengry]

Thanks, I think that's what I wrote as well.

How is class concatenation handled? Usually something like tailwind-merge is used, but it sounds like with twin you have no actual tailwind after compilation of, and thus something like tailwind-merge won't necessarily work the same way.

Sorry if I'm veering off-topic here. I can open a different Discussion if you prefer.

[ben-rogerson]

The rough process is this:

1. Twin handles your tailwind classes, converting any twin-specific classes (eg: variant groups) into classes that work with vanilla tailwind
2. Twin then runs these classes through some imported Tailwind functions to grab the css (this is where concatenation is handled)
3. Twin then converts the given css to a syntax that works with css-in-js

All of these tools for Tailwind assume youre using actual classes, but twin does all these conversions before they can read the original classes you've written.

[bengry]

Got it, thank you so much for the thorough explanation. Too bad this can't be easily automated. I guess my best bet to do what I want is to extract my code into @apply calls, within a @layer components.