feat: add tw variants

src/app.tsx

@@ -1,12 +1,13 @@
 import { useSignal } from "@preact/signals";
 import "preact/debug";
 import classes from "./app.module.scss";
+import Button from "./components/ui/Button";
 export function App() {
   const counter = useSignal(0);
   return (
     <>
       <h1 class={classes.text}>Hello, World!</h1>
-      <button onClick={() => counter.value++}>Count: {counter.value}</button>
+      <Button onClick={() => counter.value++}>Count: {counter.value}</Button>
     </>
   );
 }

src/components/ui/Button.module.scss

@@ -0,0 +1,5 @@
+@reference '../../index.scss';
+
+.button {
+  @apply rounded-2xl border-2 border-black p-5 text-white;
+}

src/components/ui/Button.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
+import classes from "./Button.module.scss";
+const button = tv({
+  base: classes.button,
+  variants: {
+    color: {
+      primary: "bg-blue-400",
+      secondary: "bg-red-400",
+    },
+  },
+});
+
+const Button: FunctionComponent<{ onClick: () => void }> = (props) => {
+  return (
+    <button type="button" class={button({ color: "primary" })} onClick={props.onClick}>
+      {props.children}
+    </button>
+  );
+};
+
+export default Button;