search

foliage-ui / foliage

🍃 Style your components with performance
https://foliage.sova.dev
28 stars 2 forks source link

Tailwind integration #28

Open Kelin2025 opened 2 years ago

Kelin2025 commented 2 years ago

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 commented 2 years ago

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

zarabotaet commented 2 years ago

What this utility will do?

sergeysova commented 2 years ago

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"