From 1eeaf31e52d1a9887a58f9fd57f3c33c22b59a37 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Fri, 28 Mar 2025 15:47:14 +0300
Subject: [PATCH] feat: add tw variants

---
 .prettierrc                          |  3 ++-
 .vscode/settings.json                |  8 +++++++-
 bun.lock                             |  3 +++
 package.json                         |  1 +
 src/app.tsx                          |  3 ++-
 src/components/ui/Button.module.scss |  5 +++++
 src/components/ui/Button.tsx         | 22 ++++++++++++++++++++++
 7 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/Button.module.scss
 create mode 100644 src/components/ui/Button.tsx

diff --git a/.prettierrc b/.prettierrc
index c4e9d98..afd6d6a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,5 +7,6 @@
   "useTabs": false,
   "semi": true,
   "bracketSpacing": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["tv"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index af2a209..2dacf6c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,11 @@
   "files.associations": {
     "*.scss": "tailwindcss"
   },
-  "tailwindCSS.experimental.configFile": "src/index.scss"
+  "tailwindCSS.experimental.configFile": "src/index.scss",
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "([\"'`][^\"'`]*.*?[\"'`])",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ]
+  ]
 }
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index bd1d4c0..3e7023c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -11,6 +11,7 @@
         "postcss": "^8.5.3",
         "preact": "^10.26.2",
         "tailwind-merge": "^3.0.2",
+        "tailwind-variants": "^1.0.0",
         "tailwindcss": "^4.0.17",
       },
       "devDependencies": {
@@ -663,6 +664,8 @@
 
     "tailwind-merge": ["tailwind-merge@3.0.2", "", {}, "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw=="],
 
+    "tailwind-variants": ["tailwind-variants@1.0.0", "", { "dependencies": { "tailwind-merge": "3.0.2" }, "peerDependencies": { "tailwindcss": "*" } }, "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA=="],
+
     "tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
 
     "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
diff --git a/package.json b/package.json
index 73a94cb..c6e7868 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "postcss": "^8.5.3",
     "preact": "^10.26.2",
     "tailwind-merge": "^3.0.2",
+    "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.0.17"
   },
   "devDependencies": {
diff --git a/src/app.tsx b/src/app.tsx
index 3af5a71..9d50cfe 100644
--- a/src/app.tsx
+++ b/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>
     </>
   );
 }
diff --git a/src/components/ui/Button.module.scss b/src/components/ui/Button.module.scss
new file mode 100644
index 0000000..fee13e6
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..d6d39f6
--- /dev/null
+++ b/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;