@twind/solid
v0.1.1
Published
Twind integration for Solid
Downloads
118
Readme
@twind/solid
Installation
npm install @twind/solid
Custom setup function
Coming soon! In the mean time use the default
setup
function provider bytwind
Styled API
Please see twind/style for config examples.
Usage
import { styled } from "@twind/solid"
// If not tag is passed, it will default to a `div`
const Box = styled()
const Button = styled("button", {
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`,
},
],
})
<Box tw="m-2.5 flex flex-wrap" css={{ gap: "20px" }}>
<Button>Button</Button>
<Button variant="gray">Gray Button</Button>
<Button variant="primary">Primary Button</Button>
<Button variant="gray" outlined>
Outlined Gray Button
</Button>
<Button variant="primary" outlined>
Outlined Primary Button
</Button>
<Button variant="primary" outlined size={{ initial: "sm", lg: "md" }}>
Responsive Primary Button
</Button>
</Box>