Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add support for mixin with twind/style, the same as in stitches #8

Open
joseDaKing opened this issue Oct 19, 2021 · 0 comments
Open

Comments

@joseDaKing
Copy link

Add support for mixin with twind/style, the same as in stitches

import { style } from "twind/style";

const blockMixin = style({
  base: "block w-full",
  variants: {
    inline: "inline-block w-auto"
  }
});

const Button = const Button = styled("button", blockMixin, {
  base: `
    appearance-none border-none bg-transparent
    rounded-full px-2.5
  `,

  variants: {
    size: {
      sm: `text-sm h-6`,
      md: `text-base h-9`,
    },

    variant: {
      gray: `
        bg-gray-500
        hover:bg-gray-600
      `,
      primary: `
        text-white bg-purple-500
        hover:bg-purple-600
      `,
    },
    outlined: {
      true: `bg-transparent ring-1`,
    },
  },

  defaults: {
    variant: "gray",
    size: "sm",
  },

  matches: [
    {
      variant: "gray",
      outlined: true,
      use: `ring-gray-500`,
    },
    {
      variant: "primary",
      outlined: true,
      use: `text-purple-500 ring-gray-500 hover:text-white`,
    },
  ],
})
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant