twind-react
twind-react copied to clipboard
Add support for mixin with twind/style, the same as in stitches
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`,
},
],
})