Tailwind integration

[Kelin2025]

Would be also cool to see tw utility

import { tw } from 'foliage-tailwind'
import { component } from 'foliage-react'

const Button = component("button", {
  defaults: { size: "normal" },
  variants: {
    size: {
      large: tw`px-4 py-2`,
      normal: tw`px-2 py-1`
    }
  }
})

[Kelin2025]

We might have other integrations in the future, so I think it's better not to litter the core

[zarabotaet]

What this utility will do?

[sergeysova]

Foliage is a build-time stylization library. Allows switching style depending on props.

We can make tw utility that allows combining tailwind classes under the convenient name, but without using @apply because it is squashing tw-classes and enlarging bundle size.

const size = {
  large: tw`px-4 py-2`,
  small: tw`px-2 py-1`,
}

const Button = component('button', css``, {
  defaults: { size: 'large' },
  variants: { size },
})

const Icon = component('svg', css``, {
  default: { size: 'small' },
  variants: { size },
})

<Button size="small" />
// class="a8sduf-button px-2 py-1"

<Icon />
// class="dhgja7-icon px-2 py-1"